HTML / CSS

jplendor·2022년 8월 5일

HTML의 기초

모든 웹페이지는 HTML을 이용하여 그 구조가 결정된다. (우리 몸의 뼈대와 같은 역할)
마크업 언어 (특별한 기호나 표기를 사용하여 글의 서식과 스타일을 정해주는 언어)
HTML을 구성하는 기본 단위: 태그
여는 태그와 닫는 태그를 이용하여 만든 것을 하나의 element(요소)라고 부른다.

문서의 구조

<html> 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려준다.
    <head>
        주로 외부 소스를 참조해야할 때 사용한다.
    </head>
    <body>
        화면에 보여주는 내용이 들어간다.
    </body>
</html>

html 요소(태그) 목록 레퍼런스: https://developer.mozilla.org/ko/docs/Web/HTML/Element

HTML에 이미지 추가하기

<img src=""> 태그
src라는 attribute(속성)값으로 이미지의 URL을 넣어주어야 한다.
attribute(속성)은 태그를 이용할 때 필요한 추가적인 정보나 명령을 받는데 사용된다.
img 태그: https://developer.mozilla.org/ko/docs/Web/HTML/Element/img
여는 태그와 닫는 태그가 구분되어 있지 않은 self closing tag (ex. <br>, <img>)

HTML 링크

링크는 웹 사이트 내부의 다른 컨텐츠나 외부 웹 페이지로 연결할 때 사용한다.
<a href="https://www.vanillacoding.co">바닐라코딩 홈페이지</a>
href라는 attribute(속성)값으로 링크를 걸고 싶은 URL을 넣어주어야 한다.
<a></a>는 글씨나 이미지를 감쌀 수 있으며, <a></a> 안에 포함된 모든 요소는 클릭할 수 있게된다.
```
<a href="https://www.vanillacoding.co">
  <img src="logo.png" alt="바닐라코딩 로고">
</a>
```
href 속성 값으로 특정 단어를 붙여서 특별한 기능을 추가할 수 있다.
<a href="mailto:abc@abc.com">이메일 보내는 링크</a>: 메일 보내는 프로그램으로 연결
<a href="tel:010-6666-6666">전화를 거는 링크</a>: 휴대폰 기기들이 전화를 걸도록 연결
href 속성 값으로 다른 웹 페이지의 URL뿐만 아니라 같은 웹페이지의 다른 위치(요소)를 넣을 수도 있다.
```
<p id="toc">수업 목차</p>
<a href="#toc">수업 목차로 이동하는 링크</a>
```
웹 사이트 내부의 자료로 연결하기를 원한다면 상대경로(같은 파일 시스템 상의 위치)를 사용하고, 외부 웹 페이지로 연결하고자 하면 절대경로(전체 인터넷 기준 해당 자료의 위치)를 사용한다.
a 태그: https://developer.mozilla.org/ko/docs/Web/HTML/Element/a

CSS의 기초

웹 페이지를 꾸미기 위한 언어

무엇을 바꾸고 싶은지 + 어떻게 바꾸고 싶은지

h1 {
  color: black;
  font-size: 30px;
}

li, p {
  color: blue;
  font-size: 30px;
}

#first {
  font-size: 20px;
}

CSS 선택자 (바꾸고 싶은 HTML 요소 선택하는 방법)

Type: 태그의 종류(Type)
Class: HTML 요소의 클래스 / 여러 개의 요소에 동일한 스타일을 적용할 때
Id: HTML 요소의 Id / 하나의 요소에만 특정 스타일을 적용할 때
Compound: 여러개의 선택자를 동시에 나열하는 방식
```
h1, h2, #box {
  font-family: Arial, Helvetica, sans-serif;
}
```
Descendent: 특정 요소의 하위 요소를 선택할 때 (공백을 기준으로 왼쪽에 명시된 선택자의 하위)
index.html
```
<div>
  <p>
    div 자식 p 입니다.
    <a href="#">p 자식 a 입니다.</a>
  </p>
  <a href="#">div 자식 a 입니다.</a>
</div>
```
style.css
```
div a {
  background-color: yellow;
}
```
직속 자식이 아니더라도 div 하위에 있는 모든 a가 선택된다.

Child: 직속 자식 요소들을 선택할 때 (손자/손녀 혹은 그 하위 요소들은 제외)
index.html

<div>
  <p>
    div 자식 p 입니다.
    <a href="#">p 자식 a 입니다.</a>
  </p>
  <a href="#">div 자식 a 입니다.</a>
</div>

style.css

div > a {
  background-color: yellow;
}

직속 자식인 a만 선택된다.

Universal: 모든 요소를 선택할 때
```
 * {
   color: orange;
 }
```

Attribute: 속성 값에 따라 선택할 때

img[alt="Cat"] {
  border: 1px solid black;
}

CSS Layout

Block vs Inline

1-1. Block Elements

항상 새로운 줄에서 시작한다.
사용 가능한 최대치의 폭을 차지한다.
자식으로 Block 요소, Inline 요소 모두 가능하다.
ex. div, p

1-2. Inline Elements

새로운 줄에서 시작하지 않고, 텍스트 흐름과 동일하게 동작한다. (줄줄이 이어 붙어서 나타나는 형식)
컨텐츠 양만큼만 폭을 차지한다.

자식으로 Inline 요소만 가능하다.
index.html

<span>span 텍스트
  <div>Inline 요소(span) 안에 Block 요소(div)를 넣으면?</div>
<span>

style.css

span {
border: solid 1px red;
}

span > div {
  border: solid 1px blue;
}

Positioning (요소의 위치 조정)

2-1. Using Flex: 기존 요소들의 흐름에서 벗어나 다양한 방식으로 자식 요소들을 배치

2-2. Using Inline Block: Block 요소를 마치 Inline 요소처럼 한줄에 이어서 배치

2-3. Using Position Property
◾ position: static; -- default

◾ position: relative;
(static일 때의 위치 기준으로 top, right, bottom, left 값에 따라 이동)

◾ position: absolute;
가장 가까운 부모 요소 중 position: relative;가 적용된 요소를 찾아 그 요소를 기준으로 위치가 잡힌다. (없는 경우 전체 페이지 기준)

🔗 추가 공부
https://ko.learnlayout.com/
https://poiemaweb.com/

📕 참고 자료: https://book.vanillacoding.co/starter-kit/

jplendor

만들기는 재밌어!

이전 포스트

SyntaxError: Cannot use import statement outside a module

다음 포스트