TIL.40 CSS 알아보기(wecode_2일차)
CSS layout
CSS 디스플레이 요소
1. Inline 요소
- 크기가 지정되어 있지 안다
- 인라인 요소의 태그로 감싸져 있는 “그 내용 만큼 만의 크기를(영역을) 갖는다”
2. block 요소
- 컨텐츠 내용과 관계 없이 화면 끝까지 크기가 할당되어있다.
- Block 요소로된 태그들은 강제 줄바꿈이 일어난다.
- block 요소에서는 width 값을 지정해도 더 이상 늘어나지 않지만,
margin auto로 설정하면 가운데로 오게 할 수 있다(width 지정해줘야함)
.center {
width: 150px;
margin: 20px auto;
}
3. lnline_block
- inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및
margin과 padding 속성의 상하 간격 지정이 가능해집니다.
- 대표적인 inline-block 엘리먼트로 <button>이나 <select> 태그 등을 들 수 있습니다.
div tag vs span tag
<body> # div tag 와 span tag 차이점
# div 줄바꿈 적용 및 디스플레이 속성 block
<div style="background-color:red">span1</div>
<div style="background-color:blue">span2</div>
<div style="background-color:green">span3</div>
# span 줄바꿈 미적용 및 디스플레이 속성 inline
<span style="background-color:red">span1</span>
<span style="background-color:blue">span2</span>
<span style="background-color:green">span3</span>
</body>
4. none
- 원래 영역을 CSS를 이용해 display: none; 인 상태로 보이지 않는 상태를 유지하다
텍스트를 입력하는 순간 Javascript가 검색 목록 요소에 다른 클래스로 교체하면서 요소를 보이게/ 안보이게 할 수 있습니다.
여기서는 hide 클래스의 dispaly : none; <-> block; 이라는 값으로 교체되면서 텍스트를 입력하는 순간 클래스를 교체하면서 보이게 됩니다.
<body>
<div class="hide">나 여기있어!!!!!!!!!!</div>
</body>
index.html을 보면 나 여기있어 !!!! HTML은 존재하는데 화면에 보이지 않습니다.
어차피 안 보일 요소는 왜 작성하는 것일까요?
목적은 interactive한 웹을 구현하기 위함으로
정말 많이 쓰이는 기법 중 하나이니 알고 있자
Table
table > tr > th, td
table > caption
- <caption> : 표의 제목
- 테이블은 항상 <table> 태그로 감싸져 있다, 보통 table로 직접 구현하지 않고 CSS를 사용한다.
- <tr> : table row의 줄임말로 한행의 시작을 나타낸다.
- <td> : table date의 줄임말로 x행x열에 내용을 넣을때 사용하며 td의 갯수가 몇 열인지를 결정하게 된다.
- <th> : table header의 줄임말로 각 열, 행의 머리를 뜻하며 scope와 함께 사용하여
조금 더 컴퓨터가 이해하기 쉬운 착한 사이트를 만들 수 있다. // <th> </th> -> <th scope='row'></th>
표 합치기
rowspan : 행을 합치는 것이기 때문에 위아래가 합쳐지고,
<th rowspan="2">
colspan : 열을 합치는 것이기 때문에 좌우가 합쳐지게 됩니다.
<th colspan="2">
input
아래 textarea 오른쪽 아래 삼각형이 있는데, 이는 브라우저의 디폴트 스타일이다
이 기능은 resize라고 하며 클릭 후 움직이면서 textarea의 크기를 마음대로 조절할 수 있는 기능이다.
textarea {
resize: none;
}
placeholder
placeholder는 도움말을 넣어주는 부분입니다.
실제 input에 입력되어있는 텍스트가 아니다. (ID(필수), 비밀번호, 학번)
placeholder는 회색으로 디폴트가 되어있는데 색을 바꾸려면 CSS에서 어떻게 접근해야할까
placeholder는 input의 속성으로 아래와 같이 CSS로 표현할 수 있다.
input::placeholder {
color: #bbb;
}콜론(::) 두개를 붙혀 selector를 만들 수 있지만, 속성을 이같은 방법으로 모두 표현하는것은 아니라고 한다.
input 태그에서 원하는 type만을 선택적으로 스타일을 입히기 위해선 아래와 같이 표현할 수 있다.
input[type="text"] {
}
위의 type만 선택하는 스타일에서 placeholder만을 강조하고 싶다면 아래와 같이 접근할 수 있다.
input[type="text"]::placeholder {
color: red;
}
input 태그에서 value = "값" 을 입력해주면 원하는 input값을 세팅한 상태로 출력할 수 있다.
<input type="number" value="123456">당연히 해당 입력창은 수정이 가능하다.
Position - absolute
Postition 에서 사용하는 값은 4개가 있으며, 가장 많이 사용되는 relative 와 absolute에 대해 알아보자.
- position: static;
- position: relative;
- position: absolute;
- position: fixed;
relative
position:realtive; 자체로는 특별한 의미가 없다.
어느 위치로 이동하지는 않지만, 위치를 이동시켜주느 top, right 등의 property가 있어야 원래의 위치로 이동할 수 있다.
여기서 top, right, bottom, left position 이라는 property가 있을때만 적용되는 프로퍼티이다.
.relative {
position: relative;
}.relative {
position: relative;
}
.top-20 {
top: -20px; # +는 아래로 -는 위로 이동
left: 30px;
}
absolute
이름과 같이 절대적인 위치에 둘 수 있다.
기준 : 만약 부모 중에 포지션이 relative, absolute, fixed 중 하나라도 있으면 그 부모에 대해 절대적으로 움직이며
해당 태그들이 없다면 가장 위의 태그(body)가 기준이 됩니다.
일반적으로 absolute를 쓸 경우 절대적으로 움직이고 싶은 부모에게 position:relative;를 부여한다.
relative와 absolute를 이용한 검색창 만들기
<body>
<div>
<input type="text" placeholder="검색어 입력">
<img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
</div>
</body>* {
box-sizing: border-box;
} # 박스 설정시 사방의 padding값도 함께 계산되기 때문에 보이는 대로
# width 값을 넣어주기 위해 기본적으로 적용해주는것이 좋다.
#앞으로 모든 css 파일에 꼭 넣어야 하는 속성이다
input {
width: 100%;
border: 1px solid #bbb;
border-radius: 8px;
padding: 10px 12px 10px 12px;
font-size: 14px
}
div {
position: relative;
width: 300px;
}
img {
position: absolute;
width: 17px;
top: 10px;
right: 12px;
margin: 0;
}
Position - fixed
fixed : 말그대로 고정되어있다는 뜻으로 absolute와 다르게 부모의 position:relative; 가 필요없다.
fixed는 눈에 보이는 브라우저 화면 크기만큼 화면에서 움직인다.