[TIL] 웹 퍼블리싱 시작하기

Jeris·2023년 4월 1일

코드잇 부트캠프 0기

목록 보기

1/107

Topic

2023/03/21부터 24주간 코드잇 부트캠프 0기에 참여하게 되었습니다.
하루에 배운 것 중 중요한 부분을 블로그에 기록할 예정입니다.
블로그를 늦게 만들어서 첫 TIL부터 차례대로 옮길 생각입니다.
Web publishing을 위한 HTML/CSS 기초 지식들을 공부했습니다.

What I Learned

1. HTML

HTML

HTML(HyperText Markup Language)은 웹 페이지와 다양한 온라인 콘텐츠를 제작하는데 활용되는 표준 마크업 언어입니다.
웹 개발자는 HTML을 이용하여 콘텐츠의 구조를 설계하며, 웹 브라우저가 어떻게 해당 콘텐츠를 사용자에게 보여줄지를 결정합니다.
웹 페이지의 내용, 레이아웃 및 스타일을 지정하는 데 필요한 다양한 HTML 태그(tag)와 속성(attribute)을 활용하여 이러한 작업을 수행합니다.
HTML은 World Wide Web의 핵심 기술이며, 일반적으로 CSS(Cascading Style Sheets) 및 JavaScript와 같은 다른 웹 기술들과 병행하여 사용됩니다.

하이퍼텍스트

하이퍼텍스트(Hypertext)는 다른 텍스트로의 링크를 포함한 텍스트를 의미하며, 이 링크는 클릭 또는 탭을 통해 접근할 수 있습니다.
하이퍼텍스트의 개념은 사용자가 하이퍼링크를 통해 다른 페이지나 문서로 쉽게 이동할 수 있게 하는 World Wide Web의 중요한 구성 요소입니다.
하이퍼텍스트는 독자에게 다른 섹션 또는 관련 정보로 이동할 수 있는 비선형적인 문서 작성을 가능하게 하며, 이를 통해 보다 상호작용적이고 동적인 사용자 경험을 제공합니다.
HTML과 같은 마크업 언어는 개발자가 웹 페이지와 다른 온라인 콘텐츠 간에 하이퍼링크를 생성하는데 주로 사용됩니다.

마크업 언어

마크업 언어(Markup language)는 문서의 구조와 포맷을 정의하는데 컴퓨터에 사용되는 언어입니다.
마크업 언어는 문서의 콘텐츠, 예를 들어 텍스트, 이미지, 비디오 등을 어떻게 표시할지 지정하기 위해 특별한 코드를 사용합니다.
마크업 언어는 특별한 태그나 괄호, 기호 등을 활용하여 일반 텍스트와 구분하며, 이를 통해 문서의 구조와 포맷을 더욱 명확하게 정의합니다.
마크업 언어는 문서의 구조와 포맷을 더욱 명확하게 정의하여, 문서의 가독성을 향상시키고 다른 시스템 간에 문서를 쉽게 공유할 수 있도록 합니다.
HTML, XML, SGML, Markdown, LaTeX 등의 다양한 마크업 언어가 있으며, 각각 다른 목적으로 사용됩니다.

HTML 버전의 역사

HTML(1991)
- 최초의 HTML이 웹의 창시자인 Tim Berners-Lee에 의해 개발되었습니다.
HTML 2.0(1995)
- HTML의 첫 표준화 버전으로, 웹페이지 작성에 필요한 기본적인 기능들을 포함하고 있습니다.
- 테이블 생성과 이미지 링크를 통한 콘텐츠 포함 등의 새로운 기능이 도입되었습니다.
HTML 3.2(1997)
- 인라인 스타일과 폼 등을 처리할 수 있는 새로운 태그가 추가되었습니다.
HTML 4.0(1998)
- 프레임, 스타일 시트, 자바스크립트 등의 새로운 기능을 도입했습니다.
XHTML 1.0(2000)
- HTML을 XML의 엄격한 문법에 따라 작성된 버전입니다.
HTML5(2014)
- 페이지를 더욱 동적이고 인터랙티브하게 만들 수 있는 다양한 새로운 기능과 태그를 도입하였습니다.
- 비디오, 오디오, 캔버스, 지리 정보 등의 다양한 콘텐츠를 쉽게 표현할 수 있도록 지원합니다.
- HTML5는 현재 가장 널리 사용되는 HTML 버전이며, 대다수의 웹 브라우저 제조사와 W3C(World Wide Web Consortium)에서 지원합니다.
- 이를 통해 개발자들은 HTML5를 활용하여 사용자에게 보다 풍부하고 혁신적인 웹 경험을 제공할 수 있습니다.

2. 한글이 깨져요!

일부 웹 브라우저에서 HTML 문서의 한글 텍스트가 깨지는 이유

웹 브라우저가 인코딩을 정확히 인식하지 못하거나, 텍스트의 인코딩과 브라우저의 인코딩이 일치하지 않을 때 한글 문자가 제대로 표시되지 않을 수 있습니다.
HTML 문서는 대체로 UTF-8 또는 다른 문자 인코딩 방식을 사용하여 저장됩니다. 이 인코딩은 HTML 문서에 포함된 문자를 컴퓨터가 이해할 수 있는 바이너리 코드로 변환하는 역할을 합니다.

해결법

HTML 문서의 <head> 섹션에 charset 속성을 추가하여 문서의 문자 인코딩을 명시적으로 설정할 수 있습니다.
```
<head>
  <meta charset="UTF-8">
  <title>문서 제목</title>
</head>
```

웹 브라우저 인코딩

웹 브라우저 인코딩(Web Browser Encoding)은 웹 브라우저가 웹상에서 전송되는 텍스트 데이터를 어떻게 해석하고 표현할지를 결정하는 규칙을 말합니다.
인코딩은 특정 문자 집합(Character Set)을 바이트 단위로 변환하는 과정입니다. 이 문자 집합은 컴퓨터에서 인식 및 표현 가능한 문자들의 집합으로, 각 문자는 고유한 코드 값으로 매핑되어 있습니다. 한 예로, 한글은 유니코드(Unicode)에서 U+AC00부터 U+D7AF까지의 코드 범위에 해당하는 코드 값을 가지고 있습니다.
웹 페이지는 대체로 HTML, CSS, JavaScript 등의 텍스트 데이터로 이루어져 있습니다. 이러한 텍스트 데이터는 특정 문자 집합을 기반으로 작성되고, 웹 브라우저는 이를 해석하여 사용자에게 웹 페이지를 표시합니다.
웹 브라우저 인코딩은 웹 페이지의 텍스트 데이터를 바이트로 변환하는 데 사용되는 인코딩 방식을 결정합니다. 대부분의 웹 브라우저는 UTF-8 인코딩을 기본값으로 사용합니다. UTF-8은 전 세계 모든 언어의 문자를 표현할 수 있는 유니코드 인코딩 방식 중 하나이며, 인터넷에서 널리 사용됩니다.
그러나 일부 웹 페이지는 다른 인코딩 방식을 사용할 수도 있습니다. 이 경우, 사용자는 웹 브라우저의 인코딩 설정을 변경하여 해당 인코딩 방식으로 웹 페이지를 제대로 해석할 수 있습니다.

UTF-8

UTF-8은 텍스트를 컴퓨터 시스템에서 표현하고 저장하는 데 널리 사용되는 문자 인코딩 표준입니다.
이 인코딩 방식은 가변 길이를 사용하며, 각 문자를 해당하는 유니코드 코드 포인트에 따라 1바이트에서 4바이트까지의 공간에 표현할 수 있습니다.
UTF-8은 ASCII와의 하위 호환성을 갖추도록 설계되었습니다. 이는 첫 128개의 코드 포인트(ASCII 문자에 해당하는 부분)를 한 바이트로 표현할 수 있음을 의미합니다. 이러한 설계 덕분에, ASCII 문자를 주로 사용하는 언어의 텍스트 처리는 매우 효율적이며, 동시에 다른 문자 체계와 언어의 문자를 유연하게 표현할 수 있습니다.
UTF-8은 현재 웹 상에서 가장 널리 사용되는 인코딩 방식으로 자리 잡아 있습니다. 거의 모든 최신 웹 브라우저와 운영 체제가 이를 지원하며, 다양한 프로그래밍 언어와 데이터베이스 시스템에서도 활용되고 있습니다. 이로 인해 UTF-8은 웹 및 애플리케이션 개발에서 국제적으로 인식받는 표준으로서의 위치를 확립하였습니다.

3. HTML 문법

HTML 파일의 기본 구조

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

<!DOCTYPE html>

<!DOCTYPE html>은 HTML5 문서 유형 선언(doctype declaration)입니다.
이 선언은 HTML5에서 문서가 사용하는 버전을 명시하는 역할을 합니다.
명시적으로 선언하지 않으면 브라우저가 페이지를 렌더링할 때 자동으로 quirks mode로 동작할 수 있으므로 <!DOCTYPE html>을 사용하여 명시적으로 문서 유형을 선언하는 것이 좋습니다.
- 이전 버전의 HTML에서는 quirks mode와 strict mode라는 두 가지 모드가 있었습니다. quirks mode는 이전 버전의 HTML에서 사용되는 레이아웃 동작 방식을 따르는 모드였고, strict mode는 최신 표준을 따르는 모드였습니다.
<!DOCTYPE html>은 HTML5 문서에서 항상 사용되는 유일한 선언입니다.
<!DOCTYPE html>을 문서의 가장 위에 위치시키는 것이 좋습니다.
이전 버전의 HTML에서는 문서 유형 선언이 더 긴 형식으로 작성되었습니다.

HTML의 기본 문법

태그(Tag)

HTML에서 태그는 웹 페이지의 다양한 요소를 정의하는 데 사용되는 중요한 구성 요소입니다. 이 태그들은 꺾쇠 괄호(angle bracket)로 감싸진 키워드를 사용하여 표현됩니다.
대부분의 태그는 시작 태그와 종료 태그로 구성되어 있으며, 이 두 태그 사이에 위치한 내용을 감싸서 해당 내용에 대한 정보를 제공합니다. 시작 태그는 <tag> 형태로 작성되며, 종료 태그는 </tag> 형태로 작성됩니다.

단일 태그(single tag)

빈 요소(empty element)라고도 부릅니다.
종료 태그가 필요하지 않습니다.
태그 마지막에 슬래시(/) 기호를 넣어서 단일 태그라는 표시를 할 수도 있습니다. (이전 버전의 HTML 문법입니다.)
주요 예시들
- <br> 줄 바꿈을 생성하는 태그
- <img> 이미지를 삽입하는 태그
- <input> 사용자 입력 필드를 생성하는 태그
- <meta> 웹 페이지의 메타데이터를 정의하는 태그
- <link> 현재 문서와 외부 리소스를 연결하는 태그
- <hr> 수평선을 그리는 태그

속성(attribute)

HTML 태그에 추가 정보를 제공하는 데 사용됩니다.
속성은 일반적으로 (attribute name) = (attribute value)의 형식으로 작성됩니다.
HTML에서 속성 이름은 대소문자를 구분하지 않으나, 일관성과 가독성을 위해 대부분 소문자로 작성됩니다.
주요 예시들
- class 요소에 대한 CSS 클래스 이름을 지정합니다. 같은 클래스 이름을 가진 요소들에게 CSS 스타일을 일괄적으로 적용할 수 있습니다.
- id 요소의 고유한 식별자를 지정합니다. 한 문서 내에서 id는 유일해야 합니다.
- style 요소에 대한 인라인 CSS 스타일을 지정합니다. 인라인 스타일은 해당 요소에만 적용됩니다.
- title 요소에 대한 추가 정보를 제공하며, 마우스를 요소 위에 올렸을 때 툴팁으로 표시됩니다.
일부 속성은 Boolean 속성이라는 특수한 유형으로, 그 자체로 참/거짓을 나타냅니다. 즉, 이들 속성은 해당 속성이 존재하면 true, 존재하지 않으면 false로 판단합니다.
- checked 체크박스나 라디오 버튼이 사용자에 의해 선택되었는지 나타냅니다.
- disabled 입력 필드나 버튼 등의 요소가 비활성화되어 있음을 나타냅니다.
- readonly 입력 필드가 사용자에 의해 수정될 수 없는 읽기 전용 상태임을 나타냅니다.
- required 입력 필드가 사용자로부터 반드시 값을 입력받아야 하는 필수 입력 필드임을 나타냅니다.
- hidden 요소가 웹 페이지에서 숨겨져 있음을 나타냅니다.
- muted 미디어 요소(<video>, <audio>)가 자동으로 음소거되도록 지정합니다.

사용자 정의 속성

사용자 정의 속성(Custom attributes)는 개발자가 HTML 요소에 원하는 속성을 추가하도록 허용하는 방법입니다.
이러한 속성은 data-* 형식으로 정의되며, 여기서 * 부분은 사용자가 임의로 정한 이름이 들어갑니다. 이렇게 정의한 사용자 정의 속성은 JavaScript를 이용해 요소를 조작하거나, CSS를 이용해 스타일을 적용하는 데 사용할 수 있습니다.
data- 접두사를 사용하면, 개발자가 자유롭게 이름을 지정할 수 있는 반면, 표준 속성과 충돌하지 않습니다. 이 접두사를 사용하지 않고 속성을 정의하면, 나중에 표준 HTML 속성에 같은 이름이 추가되었을 때 예기치 못한 결과를 초래할 수 있습니다.
사용자 정의 속성은 W3C에서 규정한 HTML 규약에 따라 작성되어야 합니다. 그렇지 않으면, 문서가 유효하지 않다고 판단될 수 있습니다.
사용자 정의 속성은 대부분의 현대 브라우저에서 지원되지만, 오래된 브라우저나 일부 특정 브라우저에서는 지원되지 않을 수 있습니다. 따라서 사용자 정의 속성을 사용할 때는 브라우저 호환성에 주의해야 합니다.

4. HTML tags

HTML elements reference

HTML elements reference - HTML: HyperText Markup Language | MDN 참조

메타 태그 예시

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

이 메타 태그는 웹 페이지를 렌더링하는 데 사용되는 인터넷 익스플로러(IE)의 버전을 지정합니다.
http-equiv 속성은 HTTP 헤더 필드의 이름을 지정합니다.
content 속성은 해당 HTTP 헤더 필드의 값을 지정합니다.
- edge 값은 브라우저가 사용자의 컴퓨터에 설치된 최신 IE 버전을 사용하도록 지시합니다.
- chrome=1 값은 Google Chrome Frame이 설치된 경우 해당 플러그인을 사용하여 웹 페이지를 렌더링하도록 지시합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 메타 태그는 웹 페이지의 뷰포트를 설정하여 웹 페이지가 다양한 기기에서 어떻게 표시되는지 제어합니다. 이는 특히 모바일 기기에서 웹 페이지가 적절하게 표시되도록 하는 데 중요합니다.
name 속성은 메타데이터의 유형을 지정합니다.
content 속성은 해당 메타데이터의 값을 지정합니다.
- width=device-width 값은 뷰포트의 너비를 현재 기기의 화면 너비로 설정합니다.
- initial-scale=1.0 값은 초기 화면의 줌 레벨을 1.0으로 설정합니다, 이는 웹 페이지가 처음 로드될 때 100%의 화면 크기로 표시되도록 합니다.

5. 메타 태그

메타 태그(Meta tag)

메타 태그(meta tag)는 HTML 문서의 <head> 섹션에 위치하는 태그로, 웹 페이지의 메타데이터(meta data)를 정의하는 데 사용됩니다. 이들은 웹 페이지가 어떻게 설명되고, 인덱싱되며, 그 외에도 다양한 속성이 어떻게 적용되는지를 지정합니다.
메타데이터는 문서에 대한 부가 정보로, 웹 페이지의 제목(title), 설명(description), 작성자(author), 키워드(keywords), 문자 인코딩(charset) 등을 포함합니다. 이 정보들은 웹 브라우저, 검색 엔진 등에 의해 활용됩니다.
메타 태그는 검색 엔진 최적화(SEO)에 중요한 역할을 수행합니다. 검색 엔진은 메타 태그에 포함된 정보를 분석하여 웹 페이지의 내용을 이해하고, 그에 따라 검색 결과를 생성합니다.
예시
- <meta name="description" content="웹 페이지 설명"> 이 메타 태그는 웹 페이지의 요약 설명을 제공합니다. 이 설명은 검색 엔진 결과 페이지(SERP)에서 보통 페이지 미리보기로 표시됩니다.
- <meta http-equiv="refresh" content="5;url=https://example.com"> 이 메타 태그는 웹 페이지가 로드된 후 5초 후에 사용자를 https://example.com로 리다이렉트합니다.
메타 태그는 웹 브라우저가 웹 페이지를 적절히 해석하고 표시하는 데 도움이 되며, 웹 개발자가 특정 동작을 제어하거나 문서에 대한 정보를 제공하는 데 사용합니다.

Open Graph

Open Graph protocol
웹 사이트가 소셜 미디어에서 공유될 때 정보를 제공하는 메타데이터 프로토콜입니다.
웹 사이트의 메타데이터를 Open Graph 프로토콜로 구성하면, 해당 웹 사이트의 콘텐츠가 소셜 미디어에서 공유될 때 해당 페이지의 제목, 설명, 이미지 등이 더욱 깔끔하게 보여질 수 있습니다.

예시

<html>
  <head>
    <meta property="og:title" content="페이지 제목">
    <meat property="og:url" content="페이지 주소">
    <meta property="og:image" content="이미지 URL">
    <meta property="og:type" content="페이지 타입(ex. website)">
    <meta property="og:description" content="페이지 설명">
  </head>
</html>

Facebook Object Debugger로 디버깅할 수 있습니다.
- Facebook Object Debugger

Twitter cards

웹 사이트가 Twitter에서 공유될 때 노출되는 정보를 제공하는 메타데이터 프로토콜입니다.
웹 사이트의 메타데이터를 Twitter Cards 프로토콜로 구성하면, 해당 웹 사이트의 콘텐츠가 twitter에서 공유될 때 해당 페이지의 제목, 설명, 이미지 등이 더욱 깔끔하게 보여질 수 있습니다.

예시

<html>
  <head>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@사이트명">
    <meta name="twitter:title" content="제목">
    <meta name="twitter:description" content="설명">
    <meta name="twitter:image" content="이미지 URL">
  </head>
</html>

Twitter cards validator로 디버깅할 수 있습니다.
- Twitter cards validator

Google Analytics

구글 애널리틱스
구글 애널리틱스(Google Analytics)는 Google이 제공하는 웹 분석 서비스로, 웹사이트 및 애플리케이션의 트래픽을 추적하고 분석하는 데 사용됩니다.
이 도구를 사용하면, 웹사이트나 애플리케이션의 사용자 행동, 방문자 분포, 트래픽 흐름 등 다양한 통계적 데이터를 수집하고 분석할 수 있습니다. 이렇게 수집된 데이터는 웹사이트나 애플리케이션의 성능을 평가하고, 사용자 경험을 개선하며, 마케팅 전략을 구성하는 데에 필수적인 정보를 제공합니다.
Google Analytics를 사용하려면, Google Analytics 트래킹 코드를 웹사이트나 애플리케이션에 삽입해야 합니다. 이 코드는 방문자의 행동을 추적하고 해당 정보를 Google Analytics에 전송하는 역할을 합니다.

6. CSS

CSS

CSS(Cascading Style Sheets)는 HTML 및 XML과 같은 마크업 언어로 작성된 문서의 스타일을 정의하는 스타일시트 언어입니다.
CSS는 웹 페이지의 배경색, 폰트, 레이아웃, 애니메이션 등 다양한 디자인 및 레이아웃 속성을 제어하여 웹 페이지의 모양과 느낌을 결정하는 중요한 역할을 합니다.
CSS의 주요 이점 중 하나는 웹 페이지의 구조(HTML 또는 XML)와 표현(CSS)을 분리하는 것입니다. 이로 인해 웹 개발자는 내용을 변경하지 않고 디자인을 수정하거나, 반대로 디자인을 변경하지 않고 내용을 업데이트할 수 있습니다. 이는 웹 페이지의 유지 관리를 쉽게 만들고 웹 페이지의 접근성을 향상시킵니다.
CSS는 웹 페이지를 만들 때 웹 표준 기술 중 하나로, W3C (World Wide Web Consortium)에서 정의하고 유지 관리합니다. 이 표준은 웹 브라우저 제조사들이 일관된 디자인 및 레이아웃을 제공할 수 있도록 하며, 웹 페이지가 다양한 장치 및 화면 크기에서도 일관된 뷰를 제공할 수 있게 합니다.
CSS는 HTML 요소를 선택하고 해당 요소에 적용할 스타일 규칙을 정의하는 방식으로 작동합니다. 이러한 규칙은 HTML 문서에 직접 삽입하거나 외부 CSS 파일을 참조하는 방식으로 적용할 수 있습니다.
CSS는 세부적인 스타일 제어가 가능하며, 웹 페이지의 각 요소에 대한 개별적인 스타일 설정이 가능해 높은 디자인 유연성을 제공합니다. 이는 웹 페이지의 전반적인 브랜드 이미지와 일관성을 유지하는 데 도움이 됩니다.

CSS 버전의 역사

CSS Level 1(1996)
- CSS의 첫 번째 공식 버전으로, W3C(World Wide Web Consortium)에 의해 발표되었습니다.
- 이 버전은 웹 페이지의 텍스트 속성과 배경색 등 기본적인 스타일링 요소를 제어하는 기능을 제공했습니다.
CSS Level 2(1998)
- CSS의 두 번째 버전으로, 위치 지정, z-index, 미디어 타입 등 웹 페이지 디자인에 대한 더욱 고급 기능을 도입했습니다.
- 선택자의 기능이 확장되어 더욱 다양한 HTML 요소를 대상으로 스타일을 적용할 수 있게 되었습니다.
CSS Level 2.1(2004)
- CSS Level 2를 개정하고 업데이트된 버전입니다.
- 일부 버그 수정과 함께, 이전 버전에서 추가된 기능의 호환성 문제를 해결하기 위한 변경 사항이 포함되었습니다.
CSS Level 3(2011)
- CSS Level 3는 여러 모듈로 분리되어 개발되었으며, 각 모듈은 특정 기능에 대한 정의를 제공합니다.
- 새로운 기능과 선택자가 추가되었고, 애니메이션, 플렉스박스, 그리드 레이아웃, 그림자, 반응형 웹 디자인을 위한 미디어 쿼리 등의 고급 디자인 기능이 도입되었습니다.
- 웹페이지의 스타일링에 대한 제어력을 크게 향상시켰으며, 현재 웹 개발에 널리 사용되는 버전입니다.

7. CSS 문법

CSS 기본 문법

내부 스타일 시트

내부 스타일 시트(Internal Style Sheet)는 HTML 문서 내의 <style> 태그를 사용하여 CSS 코드를 작성하는 방법입니다.
이 방법은 한 페이지 내에서만 스타일을 적용할 수 있습니다.

예시

<!DOCTYPE html>
<html>
  <head>
    <title>내부 스타일 시트 예제</title>
    <style>
      body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
        font-size: 16px;
      }

      h1 {
        color: #333;
        font-size: 24px;
        text-align: center;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <h1>내부 스타일 시트 예제</h1>
    <p>내부 스타일 시트를 사용하여 스타일을 적용한 예제입니다.</p>
  </body>
</html>

외부 스타일 시트

외부 스타일 시트(External Style Sheet)는 CSS 코드를 별도의 .css 파일로 분리하고, HTML 문서에서 이를 불러오는 방법입니다.
외부 스타일 시트를 사용하면 같은 스타일 규칙을 여러 HTML 페이지에 쉽게 적용할 수 있으며, 유지 관리 및 코드 재사용성이 용이합니다.
외부 CSS 파일을 HTML에서 불러올 때는 <link> 태그를 사용합니다.

예시

<!DOCTYPE html>
<html>
  <head>
    <title>외부 스타일 시트 예제</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>외부 스타일 시트 예제</h1>
    <p>외부 스타일 시트를 사용하여 스타일을 적용한 예제입니다.</p>
  </body>
</html>

인라인 스타일

인라인 스타일(Inline Style)은 HTML 요소의 style 속성을 이용하여 직접 CSS 스타일을 적용하는 방법입니다.
이 방법은 간단한 스타일 변경이 필요할 때 유용하나, 스타일 규칙이 많아지거나 여러 요소에 같은 스타일을 적용해야 할 때는 코드가 지저분해지고 유지 관리가 어려워질 수 있습니다.

예시

<!DOCTYPE html>
<html>
  <head>
    <title>인라인 스타일 예제</title>
  </head>
  <body>
    <h1 style="color: #333; font-size: 24px; text-align: center; margin-top: 50px;">인라인 스타일 예제</h1>
    <p style="font-family: Arial, sans-serif; font-size: 16px;">인라인 스타일을 사용하여 스타일을 적용한 예제입니다.</p>
  </body>
</html>

CSS 속성(CSS Property)

CSS reference - CSS: Cascading Style Sheets | MDN 참조

percentage(%)

백분율 값을 나타내는 CSS 자료형
보통 부모 객체의 width와의 상대적 크기를 지정합니다.
width, height, margin, padding, font-size처럼 다양한 속성에서 쓸 수 있습니다.

예시

<div style="background-color:navy;">
  <div style="width:50%; background-color: black;">
    <div style="width:50%; margin-left:20%; background-color:chartreuse;">
      Width: 25%, Left margin: 10%
    </div>
    <div style="width:30%; margin-right:60%; background-color:pink;">
      Width: 15%, Left margin: 30%
    </div>
  </div>
</div>

margin-left(right) 값에 백분율을 쓰더라도 부모 객체의 width를 기준으로 한다는 것을 알 수 있습니다.

auto

해당 요소의 크기나 위치를 자동으로 설정하도록 지정합니다. 이는 일반적으로 브라우저가 자동으로 계산하도록 하거나, 다른 속성 값에 따라 크기나 위치를 결정할 때 사용됩니다.
margin: auto; 해당 요소의 마진을 자동으로 설정하며, 브라우저는 해당 요소의 위치를 계산하여 수평 마진만 중앙에 위치시키도록 합니다.
width: auto; height: auto; 내용물(자식 요소)의 크기에 맞춰 해당 요소의 너비나 높이를 자동으로 조절합니다.
- 예외: block 요소의 width: auto는 width: 100%에서 좌우 마진을 뺀 값이 됩니다.
- 주의: 부모 객체가 height: auto일 경우 top, bottom을 이용할 수 없고, transform을 이용하여 세로 방향으로 움직여야합니다.

7. HTML/CSS docs

WhatWG

HTML 표준 문서

MDN(Mozila developer Network)

HTML/CSS/Javascript 사전

Feedback

복습하면서 Percentage, auto 등 자세하게 몰랐던 부분이 명확해졌다.
내일은 'CSS 핵심 개념' 코드잇 콘텐츠를 수강할 예정이다.
HTML tags, CSS properties는 수가 많으므로 WhatWG나 MDN 문서에서 천천히 훑어보거나, 필요할 때 찾아보는 식으로 접근하자.
프로젝트를 할 때, 구글 애널리틱스, 오픈 그래프, 트위터 카드를 활용해보자.

Reference

HTML 시작하기 - Web 개발 학습하기 | MDN

What is CSS? - Learn web development | MDN

<percentage> - CSS:Cascading Style Sheets | MDN

[CSS] width: auto와 height: auto 당신이 몰랐던 작동 원리 | Our Small Joy

웹 퍼블리싱 시작하기 - 강의 | 코드잇

Jeris

job's done

다음 포스트