[위코드 35기 precourse-html-css] 위코드 첫 날, htmlcss 총정리, 배운 내용 복습

정니정은니 2022. 6. 20. 21:45

들여쓰기, 띄어쓰기 (스페이스바 기능)

방법1

&nbsp

방법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을 주면 된다.