HTML / CSS

📎HTML

▶ <input> 태그

 

사용자에게 입력을 받기 위한 태그로,

입력받으려는 내용에 따라 다른 type을 이용하여 입력 형태를 지정할 수 있다.

 

한 줄짜리 텍스트를 입력받으려면 <input type="text"> 와 같이 사용한다.

text 말고도 많은 type을 사용할 수 있다.

 

 

▶ <input> 태그 외의 태그들

 

여러 줄 입력받을 땐 <textarea> 태그

드롭다운 목록을 만들 땐 <select>, <option> 태그

<select>             <option selected>선택 1(기본)</option>             <option> 선택 2</option>             <option> 선택 3</option>             <option> 선택 4</option> </select>

데이터 목록 만들 땐 <datalist>, <option> 태그

<input type="text" list="data">         <datalist id="data">             <option>리스트 1</option>             <option>리스트 2</option>             <option>리스트 3</option>         </datalist>

버튼 만들 땐 <button> 태그

 

---

📎CSS

▶ 기본 선택자

 

1. 전체 선택자  *

문서의 모든 요소에 스타일을 적용할 때 사용

* {
	margin: 0; /*문서의 전체에 margin과 padding을 0으로 설정*/
        padding: 0;
  }

 

2. 타입 선택자

특정 태그를 사용한 모든 요소에 스타일을 적용할 때 사용

p {
    font-style: italic; /*모든 텍스트 단락의 글자를 이탤릭체로 표시*/
}

 

3. 클래스 선택자  .

특정 클래스를 사용한 요소에 스타일을 적용할 때 사용

스타일을 적용하고 싶은 태그 안에 class="클래스명"으로 설정한 후 스타일을 적용할 수 있다.

.accent {
    padding: 5px; /*accent라는 클래스를 가진 요소에 패딩값 설정*/
}

 

4. id 선택자  #

클래스 선택자와 동일하게 특정 id를 갖는 요소에 스타일을 적용할 때 사용

클래스 선택자와 다른 점은, 클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면,

id 선택자는 문서에서 한 번만 적용할 수 있다.

#container {
    border: 1px solid #000; /*container라는 id를 가진 요소에 테두리 적용*/
}

 

5. 그룹 선택자  ,

여러 요소에 같은 스타일을 적용할 때 사용

같은 스타일을 적용하고 싶은 요소를 쉼표로 연결하여 사용한다.

h1, h2 {
    text-align: center; /*h1, h2의 문서들을 가운데 정렬*/
}

 

▶ 연결 선택자

 

1. 하위 선택자

부모 요소에 포함된 하위 요소를 모두 선택한다

상위 요소와 하위 요소를 공백으로 구분하여 사용한다

section p {
    color: blue; /*section의 하위 요소인 p 요소를 모두 파란색으로*/
}

 

2. 자식 선택자  >

자식 요소에만 스타일을 적용한다

하위 선택자는 자식 뿐만 아니라 손자 요소까지 적용되지만, 자식 선택자는 자식요소만!

section > p {
    color: blue; /*section의 자식 요소인 p에만 색깔을 파란색으로*/
}

 

3. 인접 형제 선택자  +

형제 요소 중에서 첫 번째 동생 요소에만 스타일을 적용한다

같은 레벨이면서 가장 먼저 오는 요소에만 적용된다

h1 + p {
    color: blue; /*h1의 형제인 p 요소들 중에서 첫 번째 p만 파란색으로*/
}

 

4. 형제 선택자  ~

모든 형제 요소에 스타일을 적용한다

h1 ~ p {
    color: blue; /*h1의 형제인 모든 p 요소들을 파란색으로*/
}

 

▶ 속성 선택자

 

1. [속성]

해당 속성이 있는 요소를 선택한다

a[href] {
    font-weight: normal; /*a 요소들 중에서 href 속성이 있는 요소에만 굵은 글자로*/
}

 

2. [속성 = 값]

지정한 속성값이 있는 요소를 선택한다

a[target = _blank] {
    padding: 30px; /*target 속성의 값이 _blank인 요소에만 패딩값 설정*/   
}

 

3. [속성 ~= 값]

지정한 속성값이 포함된 요소를 선택한다

속성값이 정확히 일치하는 경우에만 선택 (값으로 button을 주면 buttons와 같은 요소는 선택되지 않음)

[class ~= button] {
    border-radius: 5px; /*class가 button인 요소들의 모서리를 둥글게*/
}

 

4. [속성 |= 값]

지정한 속성값이 포함된 요소를 선택한다 (하이픈 포함)

속성값이 정확히 일치하거나 하이픈으로 연결된 경우에만 선택한다

a[title |= us] {
    color: blue; /*a 요소 중 title이 us거나 us-로 시작하는 요소를 파란색으로*/
}

 

5. [속성 ^= 값]

지정한 속성값으로 시작하는 요소를 선택한다

a[title ^= us] {
    color: blue; /*a 요소 중 title이 us로 시작하는 요소를 파란색으로*/
}

 

6. [속성 $= 값]

지정한 속성값으로 끝나는 요소를 선택한다

a[href $= hwp] {
    color: blue; /*a 요소 중 href이 hwp로 끝나는 요소를 파란색으로*/
}

 

7. [속성 *= 값]

지정한 속성값의 일부가 일치하는 요소를 선택한다

값이 어느 위치에 있든 값이 포함되어 있기만 하면 선택한다

[href *= us] {
    color: blue; /*href 속성값 중에 us가 어디든 포함되어 있다면 파란색으로*/
}

 

참고자료/사진출처