HTML 요소는 크게 block과 inline으로 나눌 수 있다. block은 컨테이너처럼 쌓을 수 있는 "블록"처럼 말 그대로 높이가 존재하고 옆으로 이어붙일 수 없는 태그를 칭하고, inline은 문자나 글처럼 높이가 없고 한 줄로 이어진 태그를 칭한다. 이렇게 딱 나뉘어있기에 레이아웃을 짤 때 구분이 쉬운 장점이 있지만, 여러 요소들을 상위 요소로 감싸서 배치하는 등 "세부적"인 구성한다면, 한 줄로 이어붙여야하는 것과 그렇지 않은 것을 섞어야 하는 경우가 생긴다. 그래서 나온 것이 inline-block이다. 이름처럼 높이 속성을 그대로 유지하면서 한 줄에 연달아 배치할 수 있기 때문에, 여러 요소들을 품은 상위 컨테이너들의 한 줄 배치 등으로 널리 쓰인다. 하지만 inline-block 역시 한..

.oneParent { text-align: center; } container, body 등 부모요소가 class="oneParent" 속성을 가지면, 하위 태그들을 가운데 정렬시킴 단, 하위 태그들은 width 속성이 없는 h, a, p, 등 .itsChild { margin: auto; } 위의 text-align: center;를 적용해도 안먹는 하위 태그들이 있다. 이는 하위 태그가 display: block이면서 그 width 속성을 건드린 경우에 해당한다(ex. h1 태그에 width: 10%; 적용) 이럴 때는 하위 태그에 margin을 0 또는 auto로 적용하면 된다.

.something { position: static; } 브라우저 상 기본 세팅되어 있는 값으로, 쓸 필요 없는 값. .something { position: relative; left: 100px; } 위의 static(기본) 상태였다면 존재했어야 할 위치 기준으로 좌표값을 계산하여 이동시킴(top/bottom/left/right) 해당 태그의 부모에도 relative가 할당되어있어야 하며, 그렇지 않을 경우에는 body 기준으로 움직임. 여기서는 왼쪽으로부터 100px만큼 더 떨어뜨림으로써 margin-left: 100px와 동일한 효과를 준다. 만약 이동하면서 다른 구성요소와 겹친다 해도 그걸 밀어내지 않고 그 위로 가려버림. .something { position: absolute; left: ..

Inline Block Inline-Block None 이 속성을 가진 태그들을 줄바꿈 없이 연이어 표시한다. 이 속성을 가진 태그들마다 줄바꿈을 적용한다. 이 속성을 가진 태그들을 줄바꿈 없이 연이어 표시한다. 해당 태그를 안보이게 한다. width 속성 무의미 width 속성 적용 가능 width 속성 적용 가능 JavaScript를 사용하여 사용자 반응에 맞춰 나중에는 보이게 하도록 응용 가능 .something { display: inline; } display: none; visibility: hidden; 해당 태그는 흔적도 없이 사라짐 해당 태그가 투명할 뿐

CSS 적용에는 3가지 방법이 있다. 1. inline 2. internal 3. external inline은 html 태그안에 style=""속성을 부여하는 것으로 가장 우선순위가 높고 그 태그만을 공략한다는 특징이 있지만, 그래서 다른 태그가 반복될 때는 일일이 복붙을 해야 하는 단점이 있다. internal은 위 inline의 단점을 극복하였다. 적용할 스타일을 html 태그에서 종합세트로 준비해놓는다. 하지만 internal은 그 스타일이 해당 .html파일에만 적용된다는 단점이 있다. external은 위 internal의 단점을 극복하였다. 적용할 스타일을 별도의 .css 파일에 묶어서 관리하고, 그것들을 사용할 html파일에서는 태그 안에 를 건다. link의 href 경로를 설정할 때, ..