float속성 1
박스는 크기와 위치를 가지고 있다. 1. 크기 : width, height, padding, border, margin 2. 위치 : float, position 여기서는 위치를 정리할 때 많이 쓰던(현재도 포함) float을 이해하도록 한다. 속성명 속성값 설명 float none 기본값 left 요소가 좌측으로 온다. right 요소가 우측으로 온다. div나, li, h태그처럼 display : block 의 속성을 가지고 있는 태그에 float : left 혹은 right를 주게 되면, div나, li, h태그처럼 display : block 의 속성을 가지고 있는 태그들도 width, height의 크기만큼만 자기 크기로 갖게 된다. display : block 의 속성의 성격인 [행 전체]를 ..
더보기
블록요소 속성 - 공간의 크기와 box-sizing
일반적으로 우리가 알고 있는 박스모델의 공간을 차지하는 속성은 : width, height, padding, border, margin 이 있다. widht, height는 박스의 폭과 높이를 말하고, padding은 안쪽 여백, border는 박스의 테두리, margin은 박스의 바깥 여백을 말한다. 박스의 크기가 width, hegiht만큼만 공간을 차지하게 된다 margin의 경우 상하 겹침이 있을 경우, 한번만 적용된다. padding이 적용된 경우, 텍스트를 작성하면, 하단에는 텍스트가 나타난다. box-sizing:border-box를 적용하면 공간의 크기에서 padding, border의 크기가 반영되지 않는다. 위의 그림을 보면 알수 있듯이, 기본 width, height 공간을 차지하는 ..
더보기
background 속성 7 - image sprite
배경에 이미지를 넣을 때, 하나의 이미지 안에 여러개의 이미지를 만들어 넣어 background-position으로 배경이미지를 보이도록 해주는 기법으로, 브라우저에 웹페이지를 로딩할 때 속도를 줄여주기 위해 많이 사용하는 방법이다. 이미지의 좌측 상단이 기준점(0,0) 이므로, 기준점으로 위치를 이동시켜주는 식으로 사용한다. 예를 들어 상단으로 가져오게 되면, 이미지의 위쪽 방향으로 이동시켜야 하므로, 음수(-)방향으로 좌표의 거리만큼 이동시키고 이미지의 좌측 방향으로 이동시켜야 하므로, 음수(-)방향으로 좌표의 거리만큼 이동시킨다. 네이버의 경우 로고를 배경이미지로 사용하려면, 많은 이미지가 있는 .png파일에서 로고의 위치를 찾아 이미지의 (0,0) 좌표까지의 거리를 재서, 음수방향으로 보내서 로고..
더보기
display 속성 2, 가시속성
가시속성에 해당하는 속성들을 보면, 다음과 같다. 아래 표에서 보듯이, display는 요소가 인라인인지 블록인지를 정하는 것 외에도, none이라는 요소를 안보이게 하는 속성값도 있다. 이 외에도, 안보이게 하는 속성으로 visibility, opacity, overflow까지 설명을 참고해서 작성 해 본다. 속성명 속성값 설명 display inline| block | inline-block | none | table-cell 안보이고, 공간 없어짐 visibility visible | hidden 안보이고, 공간 남음 opacity 0~1까지의 수 0 : 안보이고, 공간 남음 | 0이상 : 보이고, 공간 남음 overflow hidden | auto | scroll | visible 요소 안의 내용..
더보기
display 속성
※ display 속성은 요소의 성격을 변경할 수 있는 속성이다. 주로, 블록요소를 인라인요소로 혹은 인라인요소를 블록요소로 변경할 때 사용하게 되며, 그 외에도 가시속성으로 안보이게 처리할 수도 있으며, 최근에는 레이아웃을 적용하는 속성으로도 사용하게 된다. 속성값 설명 inline 한줄만 차지하며 공간의 크기가 내부의 요소 크기로 한정됩니다. 따라서 옆에 남는 공간에 다른 요소가 올 수 있다. 즉 요소의 너비도 해당 라인 전체가 아닌 해당 요소의 내용만큼만 차지한다. inline속성을 갖고 있는 요소의 대표적으로는 span, a, img... block 블록속성은 전체 행을 차지하게 되는 특징을 갖고 있다. p, div, h1~h6, p, form, header, section, footer... f..
더보기
semantic tag
시맨틱 요소는 브라우저와 개발자 모두에게 각 영역에 태그로 그 의미를 부여한다. 비의미론적 태그 : , - 내용에 대해 아무 의미가 없는 공간만 분할해 주는 태그이다. 의미론적 태그 : , , - 내용을 명확하게 정의한다. 시맨틱 태그는 태그 자체가 보여주는 기능은 없지만, 영역에 대한 의미를 명확하게 정의하는 태그로서, 블록요소이며, 아래와 같은 태그가 있다. 태그 설명 article 게시물, 기사, 컨텐츠내용을 정의 aside 좌우측에 들어갈 컨텐츠를 정의 details 상세설명을 정의 figcaption figure의 설명을 정의 figure 특별한 이미지, 도표, 사진 등 시각적 요소를 정의 header 상단에 로고, 제목요소 등의 내용을 작성 footer, address, header는 자식요소..
더보기
