- boxing-sizing
div같은 box단위로 contents들을 배치시 같은 너비 혹은 높이를 할당해도 각 tag에 적용되는 padding, margin 등의 값에 의해 동일한 너비 및 높이를 유지하는게 쉽지 않다.(padding, margin, border 두께 등이 width에 추가 반영됨) 개발자 입장에선 width, height 값을 절대적으로 하여 통일된 높이 혹은 너비를 유지하고 싶은 경우 "box-sizing: border-box" css 를 모든 tag에 적용해야 한다.(실무에선 필수적) - CSS Selector
- tag, class, id 별로 selector로 지정이 가능하다. tag는 tag명을 그대로 사용하고 {} 안에 속성을 지정하면 됨. class는 ".class이름"으로, id는 "#id이름"으로 사용하면 된다.
- tag와 class, id 를 동시에 설정하고 싶으면 이름사이에 ','를 부여
- tag중 class 또는 id이름이 부여된 대상만 설정하고 싶은 경우 'tag이름.class이름' or 'tag이름#id이름'으로 세부 선택 가능.
- 부모자식관계 조건을 적용하고 싶으면 부모 자식 관계인 대상 사이에 공백을 넣으면
된다.
(ex : .container hear p.title <- container클래스의 내부 header tag의 내부 p tag (클래스명이 title인))
- Block vs inline
- <p>, <div>, <H1> 등의 tag는 Block element로 한 line을 전부 차지.
- <span>, <img> 등의 tag는 inline element로 영역을 content 크기만큼만 차지.
- CSS 문법 중 display 속성을 이용하면 block, inline 속성을 변경 가능
- block을 inline으로 변경시 "display: inline-block" or "float: left(or center)" 을 이용
- inline을 block으로 변경시 "display: block" 적용
- block element에 width 값을 할당해주면 inline element처럼 사용할 수 있다.
- margin, padding, border attribute 특징
- margin과 padding의 경우 하나의 값(px)을 넣으면 4방향 전부 동일하게 적용
- 4개의 값을 넣을 경우 위우하좌 순서
- 2개의 값을 넣을 경우 상하, 좌우 순서
- list li간 컬러나 여백등을 각각 설정하고 싶은 경우가 있다. 이 경우 아래 속성을 사용.
- input 같은 컨트롤의 타입과 속성에 대한 제어
- "::" 로 tag의 attribute를 지정할 수 있다 (ex: input::placeholder { ... })
- tag 뒤에 "[타입]"통해 지정 가능 (ex: input[type="text"]::placeholder { ... })
- 더 많은 조합 보기
- Position
- 'Relative'는 top, left, bottom, right 속성으로 위치를 지정할 수 있다.
- 'Absolute'는 Position값을 가진 부모 기준으로 상대 위치 지정 용도로 사용.
- 'fixed'는 web App(모바일, 브라우저) 기준으로 특정 위치에 무조건 고정하는 옵션.
html은 코딩한 순서대로 위치가 자동으로 배치되는 구조이다. 개발자가 직접 위치를 지정하거나 부모를 기준으로 같이 배치되는 자식 tag를 구현하고 싶을 경우 "position" attribute를 사용하면 된다.
position은 다음 4개의 값 중 하나를 설정할 수 있다.
static 은 현재 잘 사용되지 않고 있다.
12년 .NET 개발 경력을 가진 웹 초짜 개발자입니다 :)