본문 바로가기

전체 글291

박스 모델 박스 모델은 아래 그림으로 표현할 수 있다. 왼쪽에 있는 박스를 박스1, 오른쪽에 있는 박스를 박스2라고 하겠다. 박스에 대한 설명 1. 빨간색 부분이 content가 들어갈 부분이다. width, height는 빨간색 사각형의 가로 세로 길이이다. 2. 주황색 선은 content와 border의 중간에 위치한다. {border: 1px solid}와 같이 적용하면 보이는 것이 박스의 가장 외측에 있는 테두리선(border)이다. 주황색 선은 빨간색 영역과 테두리선 사이의 여유 공간이며 padding이라고 부른다. border를 100px로 설정하여도 빨간색 부분은 바뀌지 않는다. 노란색 선에 대한 설명 노란색 선은 박스와 박스 사이에 위치한 선이다. 이것이 바로 margin이다. 박스1의 margin이.. 2020. 5. 3.
Inline element vs Block element 비교 요소는 기본값으로 display속성이 inline 아니면 block 이다. 이는 css3의 display 속성인데 default로 inline아니면 block으로 설정되어있다. 기능적인 관점이나 종류 별로 볼 수도 있지만 레이아웃 배치에서 중요한 것은 사용하려는 요소가 인라인/블락 중 어디에 속하는지 파악하는 것이다. 다만, css의 dispaly 속성을 변경하여 inline, block을 전환할 수 있다. 인라인은 가로로 배치가 되며 해당 태그가 사용하는 부분만큼만 공간을 차지한다. 그래서인지 margin, padding과 같은 값들이 수직으로는 사용이 안된다. 또한, width, height를 지정할 수 없다. width, height 모두 사용하는 만큼만 차지한다. 블락은 세로로 배치가 되며 사용하.. 2020. 5. 2.
css code structure(css 코드 구조) css 문법은 html의 style 태그 안에 들어간다. ( ) 에서 ~부분이다. css가 단독으로 쓰일 일은 없다. 항상 html의 특정 태그를 위해 존재한다. 프론트엔드 개발시 html과 css를 혼용해서 사용하기 때문에 초반에는 구분할 필요가 있다. 그렇지 않으면 수 많은 태그가 쏟아져 나와 과부하가 걸릴 것이다. css의 신택스는 selector {(css 속성: 값)+}과 같은 형식이다. 즉, 특정 태그를 지칭하고 그 태그에 css 속성을 하나 이상 부여하는 것이다. 그렇다면 앞으로 공부할 것은 특정 태그를 지칭하는 방법과 그 태그에 적용할 css 속성이다. html5에서 div가 레이아웃을 나눈다고 하였는데 이 때 레이아웃은 논리적인 것이다. 따라서 css없이 html만을 사용하여 코딩하면 원.. 2020. 5. 2.
HTML5 tag catecory(html5 태그 분류) HTML5의 태그 개수가 50개도 넘다 보니 다 외우는 것이 어렵다. 따라서 기능적인 관점에서 태그를 분류하고 이 분류를 기억하는 것이 기억에 용이할 것이다. 우선 익숙해질 때까지 태그가 어떤 카테고리에 들어갔는지 계속 보다보면 효율적일 것이다. 1. 레이아웃 관련 태그 = 웹사이트의 화면에 컨텐츠를 넣기 위해선 레이아웃을 정하는 것이 선행된다. 상단 메뉴바, 중간 컨텐츠영역, 하단부와 같이 레이아웃을 결정하는 것이 선행되어야 한다. 다른 블로그나 책에서 섹션 태그라고 하면서 여러 태그를 언급하는데 내 생각에는 div면 충분한 것 같다. 왜냐면 각 div 별로 class를 header, main, footer로 나누는 것이 header, section, footer를 쓰는 것과 의미적으로 똑같기 때문이다.. 2020. 5. 1.

티스토리툴바