[바닐라코딩 | HTML/CSS] - 요약

1)HTML 링크

 

a 태그는 글씨나 이미지를 감쌀 수 있습니다. a 태그에 포함된 모든 요소는 웹페이지에서 사용자가 클릭할 수 있도록 만들어집니다.

<a href="mailto:abc@abc.com">이메일 보내는 링크</a>

<a href="tel:010-6666-6666">전화를 거는 링크</a>

href 값의 앞 부분에 특정 단어를 붙이게 되면 조금 더 특별한 기능들이 주어집니다. mailto:는 이메일을 보내는 프로그램으로 연결시켜 주고, tel:은 휴대폰 기기들이 전화를 걸도록 연결됩니다.

<p id="toc">수업 목차</p>

<a href="#toc">수업 목차로 이동하는 링크</a>

 

또한 우리는 같은 페이지에서 다른 위치로 이동하는 링크를 만들 수도 있습니다. id라는 속성을 만들어서 목적지 장소에 위치한 요소에 추가하고, 그리고 다른 위치에 있는 a 태그에 href 속성값을 #id(id 값에 알맞게 변경)으로 설정해주면 됩니다.

 

 

*참고 링크

 

HTML 링크 - Starter Kit

 

2)CSS 선택

 

4. Compound

h1, h2, #box {
font-family: Arial, Helvetica, sans-serif;
}

 

여러 개의 Selector를 동시에 나열하는 방식입니다. 쉼표로 구분하여 나열된 Selector 중 하나라도 일치한다면 해당 스타일이 적용되게 됩니다.

 

5. Descendent

#nav li {

background: blue;

}

 

이 선택 방식은 특정 요소의 하위 요소를 선택할 때 사용됩니다. 두 개의 선택자 사이에 공백을 한 칸 주게 되면, 공백을 기준으로 왼쪽에 명시된 선택자의 하위에 존재하며 왼쪽에 명시된 선택자를 가진 HTML 요소를 선택하게 됩니다. 위 예제에서는 nav라는 ID 값을 가진 요소의 하위에 존재하는 모든 li 태그 요소들을 선택하여 스타일을 명시하고 있습니다.

 

 

6. Child

#list > li {

border: 1px solid black;

}

 

부등호 기호를 위와 같이 사용하여 직속 자식 요소들을 선택할 수도 있습니다. 위 예제의 경우, list라는 ID 값을 가진 요소의 직속 자식 요소들 중 li 태그 요소들만을 선택하여 스타일을 적용하게 됩니다. 직속 자식이 아닌 손자/손녀 요소 혹은 그 하위 요소들은 제외됩니다.

 

7. Universal

* {

color: orange;

}

 

위 선택자는 페이지의 모든 요소들을 선택하는 방법입니다.

 

8. Attribute

img[alt="Cat"] {

border: 1px solid black;

}

위 선택자는 img 태그들 중 alt 속성의 값이 "Cat"인 HTML 요소들을 선택하여 스타일을 적용합니다. alt 이외의 다른 속성들을 이용하여 선택할 수도 있습니다.

 

<img src="myimage.jpg" alt="Cat">

 

 

*참고 링크

CSS 선택자 - Starter Kit

 

3)Semactic Markup, Naming Convention

 

Google Clone - Starter Kit