-
[위코드 35기 precourse-html-css] 위코드 첫 날, htmlcss 총정리, 배운 내용 복습프론트엔드 개발자가 될거야./htmlcss 2022. 6. 20. 21:45
들여쓰기, 띄어쓰기 (스페이스바 기능)
방법1
 
방법2 => text-indent 을 이용
.js-description { text-indent: 50px; }
밑줄긋기
p { text-decoration: underline; }
이처럼 text-decoration를 이용한다고 알고있지만
밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵다.
그래서 내가 원하는 스타일로 밑줄을 칠 수 있게
border-bottom으로 구현하는 것을 더 선호해야한다.
CSS selector 표현
p.p-tag => p태그 이면서 p-tag클래스
.pre span => pre클래스 내부에 있는 span태그
.a div .b .pre span => a클래스 내부에, div태그 내부에, pre클래스 내부에 있는 sapn태그
div .container li.first-list => div태그 내부에, container클래스 내부에, li태그이고 first-list가 클래스인
이미지 넣기
방법1 : 태그로 이미지 넣기
<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">
방법2 : background-image로 이미지 넣기
.bg-img { background-color: yellow; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png"); height: 300px; width: 300px; background-size: 100%; }
background-size: 100%;에 대한 해석
배경이미지 크기를 div.bg-img 크기만큼 줄이려고 합니다.
해당 배경이미지가 div.bg-img의 가로크기만큼 꽉채워 그려주라는 의미입니다.
block vs inline
대부분이 block요소
예를 들어, <header>, <footer>, <p>, <li>, <table>, <div>, <h1>
block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 것
<span>, <a>, <img>, <input>, <button>, <textarea> 태그 등이 inline 요소
말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻
none
.hide { display: none; }
왜 작성하는 것 일까?
여러 이유중 하나는 interactive한 웹을 구현할 수 있기 때문!
예를 들어 네이버 검색창에 텍스트를 입력한 순간, 아래에 관련 목록이 뜨는 것!
원래는 해당 영역이 display: none; 으로 보이지 않다가, 텍스트를 입력하는 순간,
JavaScript가 검색 목록 요소에 다른 클래스로 교체하면
그 새로운 클래스에는 display: block; 이라는 값이 있다.
List
ul { list-style: none; border-left: 3px solid black; padding: 0 0 0 15px; } li { padding-top: 10px; } li:first-child { padding-top: 0; }
li:nth-child(odd) { background: red; } li:nth-child(even) { background: blue; }
Table
테이블은 항상 <table> 태그로 감싸져있다.
한 행을 시작할 때는 <tr> 로 시작한다. tr은 table row의 줄임말
각각의 셀은 <tr> 태그 내에 <td> 태그를 사용한다. td는 table data의 줄임말
행의 제목은 <th> 태그를 사용한다. th는 table heading의 줄임말
<th> 를 사용하면 가운데 정렬이 되고, 글씨 두께 또한 두꺼워진다.
셀 병합은 <td> 나 <th> 태그에 colspan, rowspan 이라는 attribute를 추가해서 구현한다.
<table class="border-table"> <tr> <th></th> <th>내용</th> <th>장소</th> </tr> <tr> <th>1시</th> <td>HTML이란</td> <td>101호</td> </tr> <tr> <th>2시</th> <td rowspan="2">HTML실습</td> <td>102호</td> </tr> <tr> <th>3시</th> <td>103호</td> </tr> <tr> <th>4시</th> <td>CSS란</td> <td>104호</td> </tr> <tr> <th>5시</th> <td>CSS실습</td> <td>104호</td> </tr> <tr> <th>6시</th> <td colspan="2">수업 없습니다.</td> </tr> </table>
가로값이 다 같은 크기로 하고싶으면 table태그에
#table { width: 450px; table-layout: fixed; word-break: break-all; }
이렇게 추가해준다.
Input
<input type="text" placeholder="ID"> <input type="password" placeholder="비밀번호"> <input type="number" placeholder="학번">
type="text"
대부분의 input type은 text다.이름, id, 주소, 닉네임 등을 입력 받을 때 사용한다.
type="password"
만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것이다. 화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다. text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나온다.
type="number"
만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없다. 숫자만 입력할 수 있다.
placeholde
실제 input에 입력되어있는 텍스트가 아니다. placeholder는 도움말을 넣어주는 부분이다.
value
미리 값을 세팅 해놓고 싶다면 그때는 value 라는 attribute를 사용
<textarea>소개:</textarea>
<textarea> 는 <input> 보다는 더 긴 텍스트를 입력받고 싶을 때 사용
디자인 변경
- input, textarea, button은 모두 inline element라서 한 줄에 이어서 나온다.
실제 사이트를 개발할 때, <input> 이나 <textarea> 를 부모 <div> 태그로 감싸 영역을 분리한다.
이렇게하면 각 <input> 위에 block 성질의 부모가 감싸고 있으니, 서로 한 줄에 나오지 않는다.
- <input> 과 <textarea> 의 가로 길이가 모두 제각각 인것을 통일시키는 방법
<div> 로 두 태그를 감싸 부모를 만들고 부모에 width 를 주고 <input> , <textarea> 의 width 는 100%로 설정한다.
- <textarea> 요소를 보면, 오른쪽 아래 삼각형이 있다. 브라우저의 default 스타일인데 없앨 수 있다.
textarea { resize: none; }
Placeholder, type 스타일
placeholder 에 회색으로 default color가 입혀진다.
placeholder 는 attribute인데 css의 selector에 어떻게 표현해 주어야 할까?
콜론 두개를 붙여서 selector를 만들어줄 수 있다!
input::placeholder { color: #bbb; }
input 세개 중에서 text 타입인 input만 스타일을 입히고 싶다면
input[type="text"]::placeholder { color: red; }
Position
position 에서 사용하는 값은 4개가 있는데 static 은 거의 사용하지 않는다.
position: relative
relative는
position: relative; 자체로는 특별한 의미가 없다.
top, right, bottom, left 프로퍼티가 있어야 힘을 발휘한다.
position: absolute
absolute는
특정 부모에 대해 절대적으로 움직인다.
단, 부모 중에 position이 relative, fixed, absolute 하나라도 있어야 한다.
일반적으로 기준이 될 부모에게 position: relative; 를 부여하면 된다.
또한 block-element는 가로크기가 부모 너비만큼 전부 차지해야 하는데,
absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 된다.
그리고 right: 0; 와 left: 0;을 주면 width: 100%; 를 준 것과 같은 결과가 된다.
position: fixed
fixed는 말그대로 고정됐다는 뜻.
fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.
absolute처럼 relative를 가진 부모 필요없다.
브라우저 최상단에 고정시키려면
왼쪽(left)에서 0, 오른쪽(right)에서 0, 상단(top)에서 0 으로 붙여주면 된다.
마지막 정리
position이 absolute이거나 fixed가 되면 주변의 요소에 상관없이 위치하게 된다.
그래서 해당 영역이 무의미해지면서 다른 요소들과 겹치게 되는데
그럴 땐 body에 padding-top을 주면 된다.'프론트엔드 개발자가 될거야. > htmlcss' 카테고리의 다른 글
레이아웃의 모든 것 (0) 2022.06.21 Semantic Web과 Semantic Tag (0) 2022.06.20 HTML input checkbox (0) 2022.06.15 [위코드 35기]HTML, CSS로 자기소개 페이지 만들기 (0) 2022.06.13