Chapter - 웹 개발 이해하기
- HTML : HyperText Markup Language의 약자로, 웹 페이지의 구조를 담당하는 마크업 언어(프로그래밍 언어X)
- CSS : Cascading Style Sheets의 약자로, 디자인 요소를 시각화 하는 스타일시트 언어.
- JS : 단순한 웹 페이지를 프로그램으로 만들어 구조와 상호작용할 수 있게 해주는 프로그래밍 언어.
Chapter - HTML 기초
- html 기본적인 구조 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css"/> //html에 index.css 파일 연결
</head>
<body>
..여러 태그로 이루어진 코드들..
<script scr="script.js"></script> //html에 script.js 파일 연결
</body>
</html>- html 태그의 구조 : opening tag, closing tag | self-closing tag
ex)<p 속성="값">콘텐츠</p>|<img src="이미지 주소"/>
- div, span 태그의 차이 : div(한 줄 차지) / span(컨텐츠 크기만큼 차지)/div 안쪽//div 밖//span 안쪽//span 밖/
- Img : 이미지 삽입 -->
<img src="이미지 주소">
- 닫는 태그가 없음.
- 속성 : scr
- a : 링크 삽입 -->
<a href="링크" target="_blank">어쩌구</a>
- target="_blank"는 링크가 새 창(페이지)으로 열림.
--> 네이버
- ul, ol, li : 리스트
_ ul(unordered list), ol(ordered list) : 부모 태그
- li : 자식 태그 / li 안에 또 ul(그 안에 li)이 들어갈 수 있음. (트리구조)
- input: 다양한 입력 폼, input type을 설정하여 다양한 종류의 input을 활용.
text
<input type="text" placeholder="type here">
-->
password
<input type="password">, 비밀번호 입력창
-->
checkbox
<input type="checkbox">체크박스, 여러 개 선택 가능
--> checked unchecked
radio
<input type="radio" name="choice" value="a">a, 여러 개 중 하나만 선택 가능(그룹 설정 가능). 이는 name 속성을 이용해 하나의 그룹으로 묶어주었기 때문임.
--> a b
- textarea :
<textarea></textarea>, text박스와 달리 줄바꿈이 되어 여러 줄 입력 가능.
-->
- button : 버튼,
<button>로그인</button>
--> 로그인
- script 태그 :
<script></script>, 자바스크립트 실행을 위해 사용
- p : paragraph(문단)의 약자, 하나의 문단을 표현.
<p>문단</p>
-->문단
-
section : 웹 페이지의 큰 의미 단위를 묶어서 하나의 구역을 구분하는데 사용됨(semantic tag).
큰 의미 단위<section>내용</section>
--> -
section과 비슷한 div : HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양되고 있음. 작은 구역은 사용 가능함.
+둘의 차이는 구역을 나누는 것 이상의 의미가 있는가 없는가임.
있으면 section, 없으면 div임. -
<header>, <main>, <nav>, <aside>, <footer>태그들 또한 기능은<div>태그와 똑같음. 태그를 부르는 이름이 다른 것뿐임. 이렇게 이름에 의미를 붙여 부르는 태그를 시맨틱 태그라고 함. 시맨틱 태그는 해당 태그가 감싸고 있는 영역이 어떤 역할을 담당하는지 개발자가 쉽게 파악할 수 있도록 도움.
Chapter - CSS 기초
- HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당.
- codepen에서 css에 따른 html의 결과를 바로바로 확인할 수 있음.
- 기본 문법 : selector {속성 : 값;}
body { color : orange; font-weight : bold; } - CSS를 HTML에 적용하는 방법 :
<link rel="stylesheet" href="index.css"/>- link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용함. link 태그의 rel(relationship)은 연결하고자하는 파일의 역할이나 특징을 나타냄.
- 파일 간의 연결은 절대경로 또는 상대경로를 입력해 원하는 파일을 찾아 연결할 수 있음.
[ / ] : 폴더를 의미함. 다만, [ / ]만 작성하면 최상위폴더를 뜻함. [ ./ ] : 현재 폴더를 의미. (생략 가능) [ ../ ] : 상위 폴더를 의미.
ex) 내 파일 위치에서 test.js 파일을 찾아보면,
- 같은 레벨의 파일 --> [ ./test.js ] 또는 [ test.js ]
- 내 폴더 밖의 파일 --> [ ../test.js ]
- 내 폴더와 같은 레벨의 폴더 안의 파일 --> [ ../폴더이름/test.js]-
CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가하는 방법(내부 스타일 시트)도 있음. But 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않음.
-
CSS 스타일 적용하는 3가지 방법 : html 태그 안에 스타일을 적용하는 인라인 스타일, html 파일 안에서 (head 태그 안에) style 태그로 css 코드를 작성하는 내부 스타일 시트, 그리고 앞서 설명한 외부 스타일 시트임.
<div style="background: #eee; background-color: red">...</div><-- 인라인 스타일 -
id vs class
-
텍스트 꾸미기 :
-
색상
color : 글자 색상
background-color: 배경 색상
border-color: 테두리 색상
-
글꼴 : font-family 속성을 통해 글꼴(폰트)를 설정
font-family: "SF Pro KR", "MalgunGothic", "Verdana";+) 다양한 글꼴 사용: Google Fonts , HTML의 link태그를 사용하여 간단하게 embed 할 수 있음.
-
크기 : font-size 속성,
font-size : "24px";
- 단위 --> 절대 단위 / 상대 단위
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
- 기타 : 사용하는 방법은 w3school이나, mdn을 통해 쉽게 확인 가능.
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
-
- 정렬 :
- 가로 정렬 : text-align --> left, right, center, justify(양쪽 정렬)
- 세로 정렬 : vertical-align --> 이 속성은 부모 요소의 display 속성이 반드시 table-cell 이어야 함. 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용 가능.
- display 👁 : block vs inline-block vs inline
CSS 박스 모델 (box model)🔳
: border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)
- border (테두리) : 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)
p { border : 1px solid red; }
+이외에도 border-style mdn과 같이 구글에 검색하면, 테두리 스타일에 대한 다양한 세부 속성을 찾아볼 수 있음.
- margin (바깥 여백)
p {margin: 10px 20px 30px 40px}
: 각각의 값은 top, right, bottom, left로 시계방향임.
: 값이 두개면 위아래, 좌우 / 값이 하나면 전체.
+)padding도 마찬가지.
*margin은 음수값을 지정할 수 있음! 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어듬. 극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있음.
-
padding (안쪽 여백)
: 배경색이나 border를 적용하면, 안쪽 여백을 더욱 선명하게 확인 가능. -
박스를 벗어나는 컨텐츠 처리 :
박스의 height 속성에 콘텐츠가 차지하는 공간보다 작은 값을 지정 -->
박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나옴 --> 이런 경우에는 박스 크기에 맞게 콘텐츠를 더이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만듬.
--> overflow
#auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성함.
#넘치는 콘텐츠의 내용을 보여주고 싶지 않으면, hidden 값을 사용.
#overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 스크롤 할 수 있게끔 지정할 수 있음.
- 박스 크기 측정 기준
content-box는 박스의 크기를 측정하는 기본값임.
그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장함.
*{
box-sizing: border-box;
}- MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용하자.
