안녕하세요 :D
이번에 좋은 기회로 카카오테크캠퍼스 프론트엔드 분야에 참여하게 되었어요 ㅎㅎ 카테캠 참여하는 분들을 쿠키즈 라고 부르는데요. 저도 쿠키즈로서 열심히 참여하려고 노력 중이랍니다! 🍪
1주차에 배운 HTML과 CSS에 대해 간단히 정리해 보았습니다 🤓
#1. 개요
웹 개발에 사용되는 언어들은 주로 다음과 같습니다. 비유적인 표현도 같이 있으니까 이해가 잘 되더라구요.
HTML(웹의 구조, 기획자), CSS(시각적인 표현, 디자이너), JS(동적 처리, 개발자)
웹에서 사용하는 이미지입니다. 주로 PNG, JPG를 자주 사용한다고 합니다. 😀
- JPG(JPEG) : 손실 압축(용량이 적음)
- PNG : 비손실 압축(용량이 비교적 큼), 투명도 지원
- GIF : 8비트 색상만 지원, 애니메이션
- WEBP : 구글이 개발한 이미지 포맷, 하위호환성
- SVG : 마크업 언어 기반
가장 많이 쓰는 단축키입니다! ⌨️ (저는 현재 MacOS를 사용하고 있어요)
모두 저장: ⌥ ⌘ S
#2. HTML Basics
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
</body>
</html>HTML에서 첫 줄부터 들어가 있는 Doctype(DTD)입니다. HTML 문서의 버전을 지정해 주는 역할을 합니다.
그다음 줄에 있는 <html></html> 은 문서의 전체 범위, <body></body>은 문서의 구조(보여지는 구조)를 나타내는 범위를 나타냅니다!
CSS, JS를 연결하는 방법
<link rel="stylesheet" href="./main.css" />
<script src="./main.js"></script>
<script defer src="./main.js"></script>마지막 줄 코드에서 <script> 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 의미합니다!
상대 경로 vs 절대 경로
| 상대 경로 | 절대 경로 |
| ./ 주변 (생략 가능) | http(https) |
| ../ 상위폴더 | / |
#3. 웹에서 시작하기
🔎 https://codepen.io/
웹에서 HTML, CSS, JS를 바로바로 확인할 수 있는 사이트인데요!
여기서 주의할 점은...!
HTML 칸은 <body></body> 부분을 나타냅니다.
브라우저 스타일 초기화
🔎 reset.css cdn를 검색해 줍니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.css">이걸 <head></head> 안에 입력해 주면 브라우저 스타일이 초기화됩니다.
저도 이번에 처음 알았는데 CSS 스타일을 초기화해 주는 게 아무래도 좋다고 해요 ㅎㅎ
#4. HTML 개요
기본 문법❗
요소(Element)
<태그> 내용 </태그>
시작(열린) 태그(Tag)와 종료(닫힌) 태그로 이루어져 있는데, 종료 태그에는 / 기호가 붙습니다.
그 사이에는 요소의 내용(Contents)이 들어갑니다.
시작 태그와 종료 태그로 이루어지지 않은 태그도 있는데요! 바로 빈(Empty) 태그라고 합니다.
HTML1~5에서는 <태그>로 나타내고, XHTML과 HTML5에서는 <태그 />로 나타내야 합니다.
여기서 HTML5는 둘 다 표현이 가능한데, <태그 />를 더 추천합니다 🌟
슬래시 기호를 붙이지 않는 것이 더 편리하긴 하지만, 슬래시 기호를 붙이는 게 더 안전하기 때문이죠!
<img src="./cat.jpg" alt="고양이"/>
<input type="text"/>
<input type="checkbox"/>
부모와 자식 관계의 이해
요소는 상위(조상) 요소와 하위(후손) 요소로 나뉘는데, 이때 후손 요소에는 자식 요소도 포함되는 개념입니다.
<!-- 자식 요소 - 시각적으로 들여쓰기(Indent) 해서 나타냄. -->
<태그>
<태그>
<태그>내용</태그>
</태그>
</태그>
글자와 상자
이번에는 요소가 화면에 출력되는 특성들에 대해서 살펴보겠습니다.
1️⃣ 인라인(Inline) 요소 (=글자 요소)
인라인 요소는 글자를 만들기 위한 요소들을 말하는데요.
<!-- 이미지를 삽입하는 요소 -->
<img src="삽입할 이미지의 경로" alt="삽입할 이미지의 이름" />
<!-- 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 -->
<a href="" target=""></a>
<!-- 특별한 의미가 없는 구분을 위한 요소 -->
<span></span>
<!-- 줄바꿈 요소 -->
<br/><span></span> 태그가 많이 사용되기 때문에 span 태그로 예시를 들겠습니다. 수평으로(왼쪽에서 오른쪽으로) 쌓이는 특징이 있는데 밑에 예시처럼 사용합니다❗️
<span>Hello</span>
<span>World</span>위와 같이 입력을 하게 되면.. Hello World라고 출력이 되는 걸 알 수 있어요 😃 (codepen에서 바로바로 확인해 볼 수 있으니 적극적으로 활용해 봅시다!)
줄 바꿈 처리는 띄어쓰기로 인식을 하는 것도 확인할 수 있겠죠?
글자 요소들의 특징을 본격적으로 알아보겠습니다.
글자 요소는 가로세로 사이즈를 지정할 수 없답니다.
<span style="width:100px">Hello</span>style 속성에 width값을 지정해 보았는데요. 적용이 전혀 안 되는 것을 확인해 볼 수 있습니다😅
이 외에도 위아래 여백도 지정이 불가능합니다.
대신 좌우 여백은 가능해요 ❗️❗️
<!-- 요소의 외부 여백 -->
<span style="margin: 20px 20px;">Hello</span>
<!-- 요소의 내부 여백 -->
<span style="padding: 20px 20px;">World</span>앞에 20px은 적용이 안된답니다
이 특징들이 되게 중요한 특징이더라구요. 꼭 기억해 두는 것이 좋습니다 :)
자식 요소로 블록 요소를 지정한 것도 안됩니다 ㅎㅎ (<span><div></div></span>) ❌
2️⃣ 블록(Block) 요소 (=상자 요소)
블록 요소의 종류는 다음과 같습니다.
<!-- 특별한 의미가 없는 구분을 위한 요소. (Division) -->
<div></div>
<!-- 제목을 의미하는 요소. (Heading) 숫자가 작을수록 더 중요한 제목을 정의. -->
<h1></h1>
<!-- 문장을 의미하는 요소. (Paragraph) -->
<p></p>
<!-- 순서가 필요없는 목록의 집합을 의미. (Unordered List) -->
<ul></ul>
<!-- 목록 내 각 항목 (List Item) -->
<li></li>
블록 요소는 부모 요소의 크기만큼 자동으로 늘어나는 특징이 있습니다. 가로 너비는 늘어나고, 세로 너비는 줄어든답니다!
인라인 요소와 다르게 가로세로 너비가 지정이 가능합니다.
👇 예시 코드
<div style="width: 100px;"></div>
<div style="height: 40px;"></div>위아래 좌우 외부·내부 여백 또한 지정이 가능합니다.
👇 예시 코드
<div style="margin: 10px;"></div>
<div style="padding: 10px;"></div>블록 요소 안에 블록, 인라인 요소 둘 다 가능합니다.
블록 요소는 다 가능하다는 것을 기억해 두세요 🤗
3️⃣ Inline-block 요소
인라인블록 요소에는 input 요소와 label 요소가 있습니다.
<input /> 요소는 사용자가 데이터를 입력하는 요소인데요.
👇 다양한 속성들과 그 속성값이 있는 것을 확인할 수 있습니다 :)
<!-- 입력받을 데이터의 타입 -->
<input type="text" />
<!-- 사용자에게 체크 여부를 입력 받음 -->
<input type="checkbox" />
<!-- 사용자에게 체크 여부를 그룹에서 1개만 입력 받음 -->
<input type="radio" /><!-- 미리 입력된 값(데이터) -->
<input value="" />
<!-- 사용자가 입력할 값(데이터)의 힌트 -->
<input placeholder="" />
<!-- 입력 요소 비활성화 -->
<input disabled="" />
<!-- 라벨 가능 요소(input)의 제목 -->
<label></label>👆 <label></label> 요소는 input 요소의 제목을 지정해 줄 때 사용합니다.
4️⃣ 테이블 요소 = table
<!-- 표 요소, 행(Row)과 열(Column)의 집합 -->
<table></table>
<!-- 행(Row)을 지정하는 요소. (Table Row) -->
<tr></tr>
<!-- 열(Column)을 지정하는 요소. (Table Data) -->
<td></td>
1주차여서 간단한 HTML과 CSS에 대해서 배웠는데, 대학교 전공 수업에서 배운 내용들이었지만 가볍게 리마인드하기 좋은 시간이었습니다! 앞으로 다른 주차도 열심히 달려 나아가보겠습니다 🏃♂️