본문 바로가기

분류 전체보기

(94)
[Web Fe] CSS 정리하기 3 이번 포스팅 역시 CSS학습 내용을 기록을 했습니다. 6장 : 박스모델 개념 Html요소는 앞선강의에서 언급 했다시피 태그와 컨텐츠로 이루어져있습니다. 그중 우리는 컨텐츠에 집중해볼것입니다. Html의 모든요소가 박스형태를 갖는다는것은 브라우저에서 출력되는 컨텐츠가 사각형의 박스형태를 갖는다는것입니다. 그렇다면 이 박스형태는 어디에 쓰는것일까요. 컨텐츠 배치와 요소박스의 크기를 계산해 출력할수도 있습니다. 그래서 옳은 브라우저에서 출력을 위해 박스모델 개념이해가 중요합니다. 위의 그림의 박스형태를 가리켜 박스모델입니다. 박스모델은 패딩 보더 마진 컨텐츠의 구성입니다. 먼저 컨텐츠는 이미지나 텍스트같은 우리가 태그사이에 담은 실제 컨텐츠를 담고있는 부분입니다. 보더는 컨텐츠를 감싸고 있는 테두리선입니다. ..
[Web Fe] CSS정리하기 2 저번 포스팅에 이어서 CSS 학습내용을 정리 할 것입니다. 값, 단위, 색 앞에서 소개했듯이 값이란, 키워드나 특정 단위(픽셀 퍼센트)를 이용하여 원하는 스타일을 적용합니다. 이는 속성과 쌍을 이뤄 사용합니다. Css에서 background등 다양한 속성이있는것과 같이 다양한 값이 있습니다. 그리고 이러한 프로퍼티마다 쓸수있는 값이 정해져있습니다. 예시로 position프로퍼티는 Static absolute relative fixed의 값을 사용합니다. 이와 같이 프로퍼티에 사용되는 값을 아는 것은 매우 중요합니다 값의 자리에 들어갈수 있는 값은 숫자값, 키워드, 색 등 다양합니다. 보통은 글자사이즈 너비나 높이를 정하는데 숫자값을 이용한다. 숫자값으로 크기를 조정합니다 숫자값 단위에는 수많은 단위가 존..
[Web Fe] CSS 정리 하기 1 (+BootStrap) 이번에는 CSS에 대해 자유롭게 정리 해보는 포스팅입니다. 동시에, 인기가 많은 Bootstrap도 정리해볼 것입니다. CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 잘 설계된 css 는 재활용이 가능하며 나아가 테마, 템플릿의 형태로 확장할 수 있습니다. 부트스트랩은 부트 스트랩은 트위터에서 개발한 UI 라이브러리 입니다. 목적 - 모바일 환경에 적합한 반응형 웹을 개발하기 위한 라이브러리 - 디자인으로 인한 개발시간을 단축하기 위한 개발도구 그렇다면, CSS를 사용하는 이유가 뭘까요? 1.관리에 유용합니다. HTML에서 스타일 관련 부분만 담아놓은것이 CSS이기에 관리에 용이. 2.재사용성을 높힐수 있습니다. 스타일 서식을 공유해서 여러 웹페이지 디자인에 재사용, 통일할..
[Web Fe] 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 이번 포스팅은 부스트코스 콘텐츠 모델, 시멘틱마크업, 블록 & 인라인 파트를 포스팅합니다. HTML요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있는데, 이런 규칙들을 그룹화 시킨 것이 콘텐츠 모델입니다. 1. Metadata 모델 Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다. 메타 태그, 타이틀 태그, 스타일 태그, 스크립트 태그, 링크 태그가 이에 해당하며 대부분 내에 들어간다는 것이 특징입니다. 2. Flow 모델 Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다. Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다. 3. Sectioning ..
[Web Fe] HTML 태그 이번 포스팅은 HTML 태그 파트를 공부 및 정리 겸 더 알아본 부분을 정리했습니다. HTML은 태그들의 집합입니다. HTML은 버전이 업그레이드되면서 태그가 새로 추가되기도 하고 삭제되기도 합니다. 그 모든 태그를 전부 외우긴 힘들고 쓰임새가 있다는 것만 알아두면 좋을 거 같습니다. 제목과 단락요소 태그 태그 등 제목 태그가 있는데 그 중요도에 따라 h1 h2 등을 부여하면 됩니다. 본문 태그는 body안에 기재합니다. 태그 | paragraph , 본문을 표시. 태그 | break, 줄 바꿈. 더 알아본 태그들. + 태그 | preformatted 입력한 그대로 표시 태그 | 굵은체로 변환 태그 | 기울임 태그 | 글자를 아래로 내려서 기입. 태그 | 글자를 위로 올려기입 태그 | 글자 아래 밑줄 삽..
[Web Fe] HTML 이해하기. 1. HTML 이해하기. 웹페이지를 만드는언어. 웹 페이지의 구조와 내용을 나타내는 'HTML' 쉽게말해, 우리가 HTML코드를 작성하게 되면 브라우저는 그것을 해석해서 화면을 나타내줍니다. 조금더 찾아본 내용. 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어 웹 서버에서는 HTML 문서를 저장하고 있다가 클라이언트가 특정 HTML 페이지를 요청하면 서버에서 해당 문서를 반환합니다. * 하이퍼텍스트 = 사용자가 흐름을 선택하여 정보를 찾는 형식 * 마크업 언어 = 문서의 논리적 구조를 명시함 태그(마크, 표시)를 이용 * HTML은 파일 확장자로 .html을 씁니다. ** HTML 문법 ** * 태그 * 속성 * 태그와 중첩 * 빈 태그 * 공백 * 주석 HTML 문법 - 태그 무언가를 표시하기 ..
[Django] Django 시작하기 Django는 파이썬기반 웹프레임워크 입니다. 먼저 웹사이트 구동 순서는 1. 사용자가 서버에 요청 2. 서버의 view는 model에게 요청 3. view는 받은 데이터를 적절하게 처리해서 template로 넘김 4 .template는 받은 정보를 사용자에게 보여줌 과 같습니다. 그래서 우린 무엇을 해야하느냐? , 다음과 같이 생각합시다. 1. App생성 ( 여기서 app이란 기능별로 나눈 단위를 말합니다.) 2. Template제작. 3. View제작 4. URL연결. 우리도 이러한 일련의과정을 장고에서 처리해주면 됩니다. 1. 먼저 APP생성입니다. 2. templates 제작 저는 firstapp이라고 이름지어 폴더를 만들었습니다. 그 후 templates폴더를 만들어 안에 html을 넣었습니다...
[Python] PS하면서 내가 보려고 만든 조금이라도 헷갈렸던 문법들. 이번 포스팅은 Python을 공부하고 나서 ps문제를 계속해서 풀어보면서 문법부분에서 아주 조금이라도 헷갈렸던 부분을 전부 적어보려고 합니다. 1. 리스트 내림차순 올림차순 정렬. list가 있을때 list.sort()로 올림차순 , ()안에 reverse = True 를 작성시 내림차순으로 정렬된다. 이때 시간복잡도는 NlogN. 힙소트와 머지소트와 비견될 정도이고 사용법도 시간을 많이 줄여주니 생각보다 좋은것같다. 그냥 바로 어떤배열을 정렬 하고 싶다면, sorted([9,1,8,5]) 요래 하면된다. 2. sys.stdin.readline() 사실 첫줄에는 input으로 입력받아도 무관하다 한다. 하지만 반복문에서 입력받을시에는 시간초과를 고려해 위의 문법을 사용해야한다. 이렇게 받은 것들은 모두 ..