[TIL #3] HTML, CSS

• 코드스테이츠 백엔드 부트캠프 3일차

​

1️⃣ HTML, CSS 의 태그와 속성들은 수많은 세부 내용들이 있고 이를 전부 적을 수 없으므로, 배우고 경험한 내용에 대해서만 기록.
2️⃣ 세부 내용은 MDN 공식 문서, W3C 등 검색하여 확인.

학습 목표

• 기초적인 프론트엔드 기술 HTML, CSS을 학습한다. 👉 오늘은 요것만!

---

프론트엔드 기본 3대장

• HTML = 구조
• CSS = 스타일
• JAVASCRIPT = 상호작용

---

Mark-up Language

• 태그 사용하여 문서나 데이터의 구조 표현.
• 태그는 원래 원고 교정이나 주석 등을 위한 것이었으나 발전함.
• 데이터 처리 절차를 기술하지 않으므로 프로그래밍 언어는 아님.

---

HTML

• 마크업 언어
• 트리 구조
• MDN : 가장 신뢰성 있는 HTML 공식 문서
• Self Closing Tag : 태그 내부에 내용이 없다면 닫는 태그 없어도 됨.

<img src="hello.png"></img>
<img src="hello.png"/>

📌  주요 태그

   1. <ul>, <ol> 그리고 <li>

<!-- <ul> 태그 예시 -->

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul> 결과

<!-- <ol> 태그 예시 -->

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


<!-- <ol> 태그의 start 속성 사용법 -->

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol> 결과

 

   2. 나머지

<div>	Division 한 줄 끝까지 차지 큰 구역 구분하기 위해서는 사용이 권장되지 않고, 작은 구역에서 사용하는 것은 최후의 수단으로 사용.
<span>	Span 컨텐츠 만큼 차지
<img>	Image 닫는 태그 X src 속성 사용
<a>	Link Anchor; 닻, 위치를 고정시킴 = 링크 고정 href 속성 사용
<input>	Input (Text, Radio, Checkbox, etc)
<textarea>	Multi-line Text Input <input> 과 달리 줄바꿈이 가능한 텍스트 입력폼
<button>	Button

 

 

---

CSS

• css 구조

• 속성이 하나 뿐일 때는 콜론 생략 가능

📌 Questions

• 텍스트의 가운데 정렬을 하기 위한 속성은?
  • text-align : center;

• 텍스트 색상 변경을 위한 속성은?
  • color : blue;
• 배경 색 변경을 위한 속성은?
  • background-color : lightgrey;
• background 속성과 background-color 속성의 차이점은?
  • background 속성은 여러가지 background-* 속성들을 빠르게 사용하기 위한 shorthand 이다. background 속성에 다양한 background-* 값들을 한번에 적용하여 사용할 수 있다. 또한 background 속성은 선언 시, 적용하지 않은 속성은 모두 default 값으로 reset 하는 특징이 있다.
• 절대단위와 상대단위
  • 절대단위 : 상위 요소 또는 창 크기에 관계없이 동일한 크기
  • 상대단위 : 다른 요소나 부모 또는 창 크기에 비례해 크기가 조정, 반응형 사이트에 적합
•  

절대단위	상대단위
px, in, cm, mm	em, rem, pt, pc, ex, ch / vw, vh, vmin, vmax

 

 

📌 CSS 적용방법

 

1. 인라인 스타일

2. 내부 스타일 시트

3. 외부 스타일 시트

---

참고 사항

• 백엔드는 OS에 독립적이라고 보면 된다.