본문 바로가기

전체 글

 (161)
float float float은 '뜨다'라는 의미로, 웹페이지에서 이미지를 띄워서 어떻게 배치를 할 것인가에 대한 속성입니다. li { float:left; } inherit : 부모 요소에서 상속 left : 왼쪽 배치, 지정시 display 무시 right : 오른쪽 배치, 지정시 display 무시 none : 요소를 부유시키지 않음 float 사용할 때 주의점 clear : float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰입니다. // float 속성을 적용시킨 부모요소에 clearfix 클래스명 부여 .clearfix::after { content: ""; clear: both; display: block; }
display&visibility display & visibility display display 속성은 요소를 어떻게 보여줄지 결정합니다. none : 태그가 보이지 않게 되는데, visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다. block : 가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈 되어 보입니다. width, height 속성을 지정 할 수 있으며, 레이아웃 배치시 주로 쓰입니다. inline : block과 달리 줄 바꿈이 되지 않고, width와 height를 지정할 수 없습니다. inline-block : block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정할 수 있습니다. visibility : 어떤 요소를..
border border border 속성은 태그의 테두리를 설정하는 속성입니다. section { border : 1px solid #fff; // 두께-스타일-색상 순서 } border-width 테두리의 두께로, 주로 px 단위를 사용합니다. section { border-width: 1px; } border-color 테두리의 색상으로, 값은 color 속성의 포맷을 사용합니다. section { border-color: #000; } border-style 테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재합니다. section { border-style: solid; } solid dotted dashed double groove ridge inset outset none 방향 테두리의 특정 방향만 ..
box-sizing box-sizing 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성입니다. 보통 content-box 는 잡기가 어려워 border-box로 작업합니다. section { box-sizing : border-box; } content-box : 콘텐츠 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값을 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. border-box 하단의 이미지처럼 width 값이 margin을 제외하고 포함된 단위로 알 수 있다.
font font font-size 글꼴의 크기를 지정합니다. h1 { font-size: 14px; } h1 { font-size: 1rem; } h1 { font-size: 1em; } px : 모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽지만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용하지 않는 것이 좋습니다. 주로 고정적인 상황일때 px단위를 사용합니다. rem : rem 단위는 문서의 최상위 요소, 즉 html 요소의 크기의 몇 배 인지로 정합니다. em : 부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기 어렵습니다. rem이 등장하면서 이 단위는 사용을 권장하지 않습니다. color 글자의 컬러를 지정하는..
margin, padding margin, padding margin 요소의 바깥쪽 여백 section { margin : 100px; } padding 요소의 안쪽 여백 section { margin : 100px; } 방향에 따른 여백 설정 시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서 // 20px 같은 표현은 상하좌우 모두 20px을 의미합니다. section { margin : 20px; padding : 20px; } // 30px 10px은 상하 30px, 좌우 10px을 의미합니다. section { margin : 30px 10px; padding : 30px 10px; } // 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다. section { ma..
width, height 속성 width, height 속성 width와 height 속성은 각각 가로 길이, 세로 길이를 의미합니다. section { width: 100px; height: 100px; } auto : 브라우저가 너비와 높이를 계산합니다. 기본값. length(길이) : 너비와 높이를 부동 소수점 뒤에 절대 단위 지정자 (cm, mm, in, pt, pc) 또는 상대 단위 지정자 (em, ex, px)가 오는 값을 지정합니다. %(퍼센트) : 너비와 높이를 퍼센트로 폭을 적용합니다. tip! height를 100%로 설정하는 것은 값을 상대값으로 지정하는 것이기 때문에 부모요소에 대한 명확한 height 값이 정의가 되어야만 가능합니다.그래서 부모가 가진 height 값이 설정되어 있지 않는 경우 부모의 heigh..
css 우선순위 css 우선순위 css는 어떤 속성이 우선되어 적용되는지가 이미 약속되어 있습니다. 같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용합니다. css 우선순위가 높은 순서 !important css in-line 선언방식 id 방식 class 선택자 태그 선택자 전체 선택자 상위 요소에 상속받은 속성 !important 우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important를 붙여서 적용시켜주면 됩니다. !important는 우선선위 뿐만 아니라 디자이너-개발자간 커뮤니케이션시 중요한 속성임을 알리는 뜻을 나타내기도 합니다. section { box-sizing: border-box !imp..

티스토리툴바