TIL - HTML&CSS(1)

김영훈·2021년 2월 6일

HTML&CSS

목록 보기

2/5

# 들어가며

Wecode에서 진행되는 사전 스터디 모임이 첫 주를 맞이했다. 온라인 화상 회의로 이뤄진 비대면 만남이었다. 앞으로 4~5주 동안 함께 스터디를 꾸려나갈 팀원과 팀장이 정해졌고 구성원들과 학습 방향에 대한 의견을 나눴다. 개인적으로 컴퓨터 화면에 얼굴을 맞대고 타인과 소통하는 일이 처음 있는 일이라 낯섦과 어색함이 교차하긴 했지만, 스터디 모임이 반복되면 이마저도 익숙해질 것 같다. 주어진 기간 동안 팀원들과 함께 개발 지식에 대한 기초를 쌓아나갈 예정이다. 즐겁고 재미있는 시간이 되리라 기대해본다.

앞으로 velog 플랫폼을 활용하여, 배우고 습득한 지식에 대한 정리를 해나갈 생각이다. 물론 이러한 기특한(?) 생각이 나의 자발적 의지에서 비롯됐을 리 없다. wecode에선 TIL(Today I learned)이라는 명칭으로 부트캠프 수강생들에게 학습한 내용에 대한 기록을 남길 것을 권장하고 있다. 배운 내용을 글로 써서 정리할 수 있다는 측면에서도, 개발자로서 내가 가진 정체성을 타인과 공유할 수 있다는 점에서도 여러모로 도움이 되는 작업이라는 생각이 든다. 오늘은 1주 차 과정에 해당되는 HTML과 CSS에 대한 내용을 정리해볼까 한다. 자세한 내용은 아래와 같다.

# HTML

코딩이란?
- 원인에 해당하는 코드(Code, Source, Language)를 통해서 결과(Application, App, Program, Webpage, Website)를 만듦
HTML이란?
- 웹페이지를 만드는 컴퓨터 언어
- 웹페이지의 구조를 잡는 데 사용된다.
- 브라우저는 html 파일을 통해 웹페이지에 그려질 내용을 파악한다.
- 장점: 1. 쉽다 2. PUBLIC domain(저작권 비용X, 특정 기업의 독점X)
editor
- 코드 작성에 최적화된 도구
웹페이지 읽는 법
- 웹 브라우저 창에 주소 입력: "다른 컴퓨터"에 저장되어 있는 웹 페이지를 읽는 방법
- editor로 파일 열기: "웹브라우저와 같은 컴퓨터"에 있는 파일을 읽는 방법
  cf.) vsc의 경우 'open in browser' 설치 후 'alt + b'로 확인 가능

# HTML 태그

태그 종류 및 쓰임새
- <strong></strong>: 콘텐츠를 굵은 텍스트로 표현. 해당 콘텐츠의 중요성 강조할 때 사용
- <u>: 밑줄(underline)
- <h1> ~ <h6>: 제목을 정의할 때 사용
  - <h1>: 가장 중요한 제목을 정의 / <h6>: 가장 덜 중요한 제목을 정의
- <br>: 강제 줄 바꿈 (닫히는 태그 x)
  - 장점: 중복 사용 가능
- <p></p>: 단락을 나눔
  - 장점: <br>보다 정보("단락의 존재를 의미론적으로 내포")로서의 가치가 높다
  - 단점: <br>처럼 여백 지정을 자유롭게 할 수 없다 👉 css로 해결 가능
```
<p style="margin-top: 40px;"></p>
```
전 세계 웹에서 가장 많이 쓰이는 태그를 알고 싶다면...
- 참고 웹: 링크 텍스트
- 사용 빈도가 높은 태그부터 공부하는 것 : HTML 공부의 방향성 , 윤곽을 잡는데 도움이 된다
HTML 엔티티(escape 문자)
- <: <
- >: >
-  : 스페이스 1회
의미에 맞는 태그 사용의 중요성
- 쓰임새에 맞게 태그를 사용하는 것이 중요!
- 가령, 웹의 제목을 작성하려면 '제목'의 의미(정보)를 지닌 <h1~6>를 사용하는 것이 좋다
- 이처럼 의미에 맞는 태그가 사용된 웹이, 검색 엔진에 의해 노출될 확률도 높다.(비즈니스적 관점)
- 더불어, 웹 사용자들의 웹 접근성(accessiblilty)을 상승시킬 수 있다. (휴머니즘적 관점)_

# HTML 태그 문법

태그 종류 및 쓰임새
- <img>
  - HTML 문서에서 이미지(image)를 정의할 때 사용
  - 속성(attribute): 태그 이름만으로 정보가 부족할 때, 속성을 추가해 더 많은 의미 부가 가능
  - <img>가 아닌 css를 활용하여 이미지를 생성하려면 css의 background-image 속성을 사용하면 된다
  - <img>가 아닌 <div>에 background-image 속성을 적용하여 이미지를 생성한 경우, 생성된 이미지의 가로 세로 너비는 <div> 내부에 있는 내용이나 요소의 크기에 의해 결정된다.
  - <div>는 block 요소로서, CSS를 통해 가로 및 세로에 대한 길이값이 지정되기 전까진, 가로 길이는 화면의 가로 길이만큼, 세로 길이는 요소의 세로 길이만큼을 차지한다.
  - 만약 css를 통해 가로와 세로 길이를 고정시키면 block요소의 크기가 block요소 내부의 내용에 따라 유동적으로 변하는 걸 막을 수 있다.
  - css의 background-size 속성을 활용하면 지정된 이미지 원본의 크기의 비율을 지정된 가로 세로 너비에 맞춰 줄일 수 있다.
```
 <img src="" width=""> c.f) src : 이미지 경로, width : 이미지 가로 길이, alt : 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
```
  - 저작권 걱정 없는 이미지 다운로드는 이 곳에서: 링크 텍스트
- <ol>, <ul>, <li>
  - <ol>: ordered list의 약자. 번호 형식으로 순서를 매겨 목록을 만듦
  - <ul>: unordered list의 약자. 순서 없이 글머리 기호를 붙여서 목록을 만듦
  - <li>: list item의 약자로, 목록의 내용이 되는 실질적인 태그
  - 세 가지 태그의 관계: <li>는 반드시 <ol> 혹은 <ul> 내부에서 자식 태그로 사용된다
  - <li>가 부모 태그(<ol>, <ul>)가 필요한 이유: 부모 태그가 다수의 <li>를 "그룹핑"해주기 때문

# HTML 태그 문서 구조

태그 종류 및 쓰임새
- <!DOCTYPE html>
  - HTML 파일의 첫 줄에 위치하는 선언문
  - HTML5 버전을 사용한다는 의미
- <title>
  - 웹페이지의 제목을 사용자에게 명시
  - 검색 엔진에서 <title> 내용을 웹페이지 표지 정보로 인식
- <meta charset="UTF-8">
  - content 속성 :content="width=device-width"
    - 디바이스의 가로 길이와 웹페이지의 가로 길이를 일치시킴
```
<meta charset="UTF-8"> c.f) charset : 해당 HTML 문서의 문자 인코딩 방식을 명시
```
- <html>, <head>, <body>
  - <html>: <head>와 <body>를 감싸는 태그
```
<!doctype html> c.f) 관용적으로 써야 하는 코드
<html>
<head>
</head>
<body>     
</body>
</html>
```
  - <head>: HTML 본문을 설명하는 태그(<title>, <meta>...)들을 감싸는 태그
  - <body>: HTML 본문 태그(<img>, <ol>, <strong>...)들을 감싸는 태그. 화면에 보여질 각종 태그들이 위치한다.
- <link>
  - 해당 문서와 외부 리소스를 연결
  - href 속성: 연결할 외부 리소스 URL 입력
  - target 속성: 링크 클릭 시 브라우저 창을 여는 방법 결정
    -_self: 링크를 클릭한 해당 창에서 연다
    -_blank: 링크를 새창으로 연다
    -_parent: 부모 창에서 연다(부모 창이 없으면 _self 속성으로 처리)
    -_top: 전체 브라우저 창에서 가장 상위의 창에서 연다
  - title 속성: 해당 링크에 마우스를 갖다 대면 출력되는 link에 대한 설명 입력
```
<a href="" target="" title=""></a>
```

김영훈

Difference & Repetition

이전 포스트

TIL - HTML&CSS(2)

다음 포스트

TIL - HTML&CSS(3)

2개의 댓글

김아름

2021년 3월 3일

영훈님 앞으로 💪🏻💪🏻💪🏻

1개의 답글