목록Inline (4)

Jeden Tag, aufrichtig und lustig.

css 13. position / display

웹페이지상에서 레이아웃을 구성할 때 사용되는 position과 display 개념에 대해 정리해보고자 한다. position position은 복잡한 레이아웃을 만들기 위해서는 사용되는 속성이다. 포지션 속성을 사용하여 요소를 원하는 위치에 지정할 수 있다. 1. relative relative는 별도의 속성을 지정하지 않는 이상 static과 동일하게 동작한다. top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것이다. 2. absolute absolute는 가장 다루기 까다로운 위치 지정 값이다. 뷰포트에 상대적으로 위치가 지정되는 게 아니라, 가장 가까운 곳에 위치한 조상 엘리먼트..
CSS 2022. 7. 20. 14:30
css 6. <div>

*division : 분할 디자인 목적을 위해 섹션을 나눌 때 사용하는 의미없는 태그이다. class나 id 속성을 통해 css 디자인을 하는데 사용한다. 그룹핑하고 레이아웃 분리 및 가독성 향상을 위해 사용될 수 있다. ex. 헤더, 메뉴, 주요 내용, 푸터 *block level element ↕ *inline level element *태그를 사용하는 것의 적절성을 판단 할 수 있는 사이트 http://caniuse.com Can I use... Support tables for HTML5, CSS3, etc caniuse.com
CSS 2022. 3. 26. 00:09
css 4. block level / inline / inline-block

block level element 화면 전체를 사용하는 요소 ex. width와 height로 크기 조정가능하다. 스타일을 패딩과 마진, 보더 속성을 사용하여 디자인 할 수 있으며 다른 요소를 밀어낸다. inline element 자기 자신의 부피, 컨텐츠만큼 사용하는 요소 ex. width와 height로 크기 조정을 할 수 없다. 패딩과 , 보더 속성을 자유롭게 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다. 해당 속성들의 상하 값이 다른 요소를 밀어내지 않는다. inline-block element inline요소 block level 요소의 특성을 모두 가지고 있다. inline 처럼 다른요소와 붙어있을 수 있고, block level처럼 width, height, margin, padd..
CSS 2022. 3. 25. 23:43
css 3. 선택자 종류

선택자 종류 class선택자 .saw { color : gray ; } *class 속성 값에 여러개 값이 들어갈 수 있고, 띄어쓰기로 인해 구분이 가능하다. css *class선택자는 맨마지막에 등장한 class선택자가 우선순위를 가지고 있다. .hero { background-image : url ("~") ; background-size : cover ; } id선택자 해당 요소에만 넣고 싶은 디자인을 적용할 때 사용한다. css #active { color : yellow ; } 선택자 우선순위 tag(element) < class < id < inline css **class나 id가 selector일때 태그와 결합할 수 있다. p { font-size: 20px; } .p-tag { color..
CSS 2022. 3. 24. 20:43
이전 Prev 1 Next 다음