블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다
인라인 요소: 자기에게 필요한 만큼만 사용
display속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의함
p{
display: block;
width:100px;
height:100px;
/*display가 inline일 때에는 width와 height가 적용 안됨*/
/*display: inline*/
/*옆으로 늘어질 때에는 inline-block*/
}
display:none이면 화면에 아무것도 표시되지 않지만 <span></span>태그 달아주면 그 부분만 화면에 나타나게 됨
문서의 흐름
웹 요소들이 화면에 표시되는 순서는 기본적으로 html 문서 내에서 태그가 쓰여진 순서 따름
CSS의 float 속성: 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치 변경
float 속성을 적용한 요소: 부동 요소(위치를 이동하며 다른 요소의 공간에 영향을 미침)
.container{
height: 400px;
border: 1px solid black;
}
#first{
float: right;
/*문서의 흐름을 벗어남*/
}
#second{
float: right;
/*문서의 흐름을 벗어남*/
}
p{
clear: both;
/*float를 무시하겠다
공간에 균열 생기는 요소 제거 가능*/
}
최근에는 float 많이 안 쓰는 추세임
position: 문서 상에 요소를 배치하는 방법을 정의
top,bottom,right,left가 최종 위치를 결정함
~에서부터 얼마나 떨어뜨릴거야.
position 유형: static, relative, absolute, fixed
div{
width: 100px;
height: 100px;
color: white;
background-color: orange;
}
.rel{
background-color: red;
position: relative;
left: 50px;
}
.abs{
position: absolute;
right: 50px;
top: 10px;
/*없는 것처럼 취급
absolute 화면 기준으로 이동함
~에서부터 ~px*/
}
.scroll{
height: 2000px;
}
.fixed{
position: fixed;
right: 50px;
bottom: 50px;
/*화면 상에서의 고정*/
}
postion과 z축
z-index속성: 요소의 쌓임 순서를 정의 가능
=> 위치 지정 요소: position 속성이 정의되어 있는 요소
요소의 크기가 정해져 있는 상태에서 내부 컨텐츠의 크기가 요소보다 커지는 상황 발생: overflow
overflow 처리 유형: visible, hidden, scroll, auto
div{
width: 100px;
height: 100px;
position: relative;
}
.div1{background-color: orange; z-index: 4;
overflow:auto;}
.div2{background-color: red; bottom: 50px; z-index: 3;}
.div3{background-color: purple; bottom: 100px; z-index: 2;}
.div4{background-color: green; bottom: 150px; z-index: 1;}
선택자 더 알아보기
<style>
/*
기호와 함께 사용하는 속성 선택자
*: 값의 포함 여부
^: 값의 시작 여부
$: 값의 끝 여부
*/
[width *="120"]{
border: 5px dashed red;
/*width, alt를 []안에 작성하면 그 부분만 해당되게 됨*/
}
body p{
color: blue;
}
body em{
color: green;
}
/*p>em하면 p태그의 한 단계 밑에 있는 em
p em 하면 p에 속한 em*/
#sam + p{
color: orange;
/*인접 형제 선택자*/
}
#sam ~p{
color: orange;
/*형제 선택자는 뒤이어 등장하는 형제들을 대상으로 한다*/
}
</style>
</head>
<body>
<img src="dog.jpg" width="120" alt="대전">
<img src="dog.jpg" width="120" alt="대전">
<img src="dog.jpg" width="10" alt="대전" id="sam">
<p>강아지는 귀엽다. 왜냐하면 그냥 귀엽기 때문이다</p>
<p>나는 강아지가 고양이보다 더 좋다</p>
<p>강아지 키우고 싶지만 <em>흑흑 </em>털 날려서 못키운다.</p>
의사클래스(가상클래스)
선택자에 추가하는 키워드
:(콜론) -> 의사클래스를 사용하겠다는 의미
~일 때 -> ~ 하겠다는 의미
hover: 마우스 포인터가 요소에 올라가 있다
active: 사용자가 요소를 활성화했다
...등등등
자주 쓰이는 의사 요소들
after : 요소의 앞에 의사 요소를 생성 및 추가한다
before: 요소의 뒤에 의사 요소를 생성 및 추가한다
<style>
.menu{
padding: 10px;
border-bottom: 1px solid black;}
.menu>li{
display: inline-block;
width: 80px;
}
li>a{
display: inline-block;
width: 80px;
padding: 10px;
text-decoration: none;
}
a:hover{
color:white;
background-color: gray;
}
a:active{
color: white;
background-color: black;
}/*꾹 누르면 active 상태*/
li:nth-child(n){
/*li 끼리 형제상태이니까*/
font-size: 20px;
}
a::after{
content: "보기";
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="a">사전</a></li>
<li><a href="b">뉴스</a></li>
<li><a href="c">증권</a></li>
<li><a href="d">지도</a></li>
</ul>
</body>
</html>
