.a div .b .pre span { background-color: yellow; }
라는 css가 있다고 하자. 이는 a클래스 안에 div태그 안에 b클래스 안에 span태그에만 적용되는 것이다. 아래 코드를 보자.
<div class="a"> <div> <header class="b"> <h1 class="pre"> <span>제목! 노란색 배경 나옴!</span> <span class="title">이것도 나옴!</span> </h1> <span>이건 적용안 됨</span> </header> </div> <span>이건 적용안 됨</span> </div>
span태그가 5, 6, 8, 11번째 라인에 사용되고 있지만 실제로 위의 css가 적용된건 5, 6번 라인 뿐이다.
이렇게 css를 사용하다보면 중복되는 스타일이 생길수있다.
이때는 아래의 규칙을 적용한다
대략 tag <<< class <<< id <<<<<< inline css 라는것만 알아두자.
위의 그림에서 노란색 부분이 차지하는것이 영역입니다.
1, 2, 3, 4번째 줄에 해당되는것이 block이고 5번째 줄에 해당되는것이 inline이다.
<header>, <footer>, <p>, <li>, <table>, <div>, <h1>
< 대표적인 block 태그들이다. >
항상 새 줄에서 시작하며 좌우 끝까지 영역을 차지한다.
<span>, <a>, <img>
< 대표적인 inline 태그들이다. >
딱 텍스트의 영역만큼 차지한다.
하지만 이는 css를 통해 성질을 바꿀수 있다.
.inline-p { display: inline-block; } .float-left { float: left; } .float-right { float: right; }
이와 같은 값을 css 속성을 줌으로서 inline 속성을 가질 수 있다.
.block-span { display: block; }
반대로 이와 같은 값을 줌으로서 block 속성을 가질 수 있다.
.center { margin: 20px auto; }
css속성으로 위와 같이 작성하였을때 이는 20px은 위,아래를 의미하고 auto는 좌,우를 의미한다.
.center { margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; }
< 두 코드의 의미는 같다. >
< 실제로 적용한 모습 >
position에는 총 4가지 값이 존재한다.
이중 static은 기본값이다.
이는 static이었을때 기준으로 상하좌우로 움직입니다.
이는 position: static 속성을 가지고 있지 않은 부모를 기준으로 상하좌우로 움직입니다. 만약 부모중 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.
이는 사용자가 보는 화면을 기준으로 고정됩니다.
간단하게 설명하자면 해당 클래스에 해당되는 부분을 띄워서 배치하는것이다. 띄워지기 때문에 기존의 div태그 등의 문단으로 묶이지 않고 전체적인 모양을 흩트려 놓는다. 때문에 사용되는것이 clear이다.
float 요소를 가진 부모태그에 css로 clear:both;를 작성하게되면 해당 부모는 float효과를 받지 않고 float된 요소를 감싸게 됩니다.
< ol로 li를 묶어 정렬했을때 >
< ul로 li를 묶어 정렬했을때 >
<input type="text" placeholder="ID"> <input type="password" placeholder="비밀번호"> <input type="number" placeholder="학번"> <textarea>소개:</textarea> <button>제출완료</button>
< 위 코드의 실행 화면 >
input 태그를 이용하여 입력을 받을수있다.
type에는 text, password, number 등을 받을수 있고 각각의 용도가 다르다.
placeholder를 통해 어느것을 입력받는지 표기가 가능하다.
value를 통해 미리 값을 입력해 놓는것이 가능하다.
textarea 태그를 이용하여 input 태그보다 더 긴 문장을 입력 가능하다.
input[type="text"]::placeholder { color: red; }
위의 css코드를 작성시 input중 type이 text인 부분에만 css를 적용할 수 있다.