HTML & CSS

HTML

Hypertext Markup Language의 약자로, 웹페이지의 구조를 설계하는 마크업 언어
즉, 프로그래밍 언어가 아니다. (왜? 튜링 완전하지 않아서 ; 반복문과 조건문이 없고, 메모리 접근이 안됨.)

HTML의 구조

javascript

<a href="www.naver.com"></a>

꺽쇠(<, >) 로 묶은 부분을 태그라고 한다.
태그의 이름 옆에 붙은 것을 속성이라고 한다.
주석 :

자주 쓰는 태그

가장 기초적인 html 문서의 구조

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>여기에는 문서의 제목을 입력해주세요</title>
  </head>
  <body>
    여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
  </body>
</html>

무언가를 쓸 때

javascript

<h1> : 제목
<p> : 
<ul> :
<a href=""> : 하이퍼링크

무언가를 그릴 때 쓰는 태그

bash

<div> : 네모 그리기
<table> : 표 그리기

CSS

Cascading Style Sheets의 약자로, 웹페이지에 색을 입힐 때 쓰는 스타일링 언어
선택자 옆에 중괄호를 쓰고, (속성) : (값);을 나란히 쓰면 된다.

css

h1 {
  color: red;
  font-size: 5em;
}

여기서는 h1 이 선택자. color, font-size가 속성, red, 5em이 값이다.

자주 쓰는 CSS

정렬하기 : flex

css

.content {
	display: flex;
}

justify-content : 가로로 정렬
align-items : 세로로 정렬

CSS의 구조

모든

CSS 지정

HTML의 textarea 줄바꿈 문제

textarea에서 입력된 줄바꿈(엔터)이 HTML에서 올바르게 렌더링되지 않는다는 것입니다. HTML은 기본적으로 줄바꿈 문자를 인식하지 않기 때문에 줄바꿈을 유지하기 위해 CSS 속성을 사용하거나, 문자열을 HTML 요소로 변환하는 방법을 사용해야 합니다.
이 경우, CSS에서 white-space: pre-wrap; 속성을 사용하여 줄바꿈을 유지할 수 있습니다.