html 학습목표
- HTML의 기본 구조와 문법을 설명할 수 있다.
- HTML이 마크업 언어라는 것을 설명할 수 있다.
- 자주 사용되는 HTML 요소를 활용할 수 있다.
- div, span, ul, ol, li, input, id, class 등
시맨틱 태그에 대해 설명할 수 있다. - 웹 문서의 구조와 내용을 HTML로 작성할 수 있다.
**1~2**
HTML은 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어이다.
**3**
div는 한 줄을 차지하고, span은 컨텐츠 크기만큼 공간을 차지한다.
img : 이미지 삽입 태그 <img src="https://~~~"> * img는 닫는 태그가 필요하지 않다.
a태그 : 링크 삽입 <a href="https://~~~">
ul, ol, li : 리스트를 정리해주는 태그
input, textarea :
- input은 텍스트나 체크박스 등을 만들 수 있다. input 타입 중 radio와 checkbox의 차이점은 radio는 이 중에서 하나를 선택하는 것이라고 볼 수 있으며, name을 통해 그룹을 지정해준다. checkbox는 여러개를 선택할 수 있다는 특징이 있다.
- textarea는 줄바꿈이 되는 입력폼을 생성해준다.
태그 중첩 생성을 하고싶다면
div > ul > li
section : 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용된다.
**4**
hr : 수평선을 그어주는 태그
br : 단락 중간에 줄 바꿈을 해주는 태그
pre : 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타나게 해주는 태그CSS 학습목표
- CSS를 왜 사용하는지 설명할 수 있다.
- CSS의 기본 문법과 구조를 설명할 수 있다.
- HTML에 CSS를 적용하는 방법에 대해 이해할 수 있다.
- 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 설명할 수 있다.
- id 및 class와 관련된 selector 규칙을 이해할 수 있다.
- CSS를 이용해 텍스트를 꾸밀 수 있다.
- CSS에서 쓰이는 두 가지 단위를 설명할 수 있다.
- 각 단위가 어떤 경우에 적합한지 설명할 수 있다.
- CSS Box Model을 이해할 수 있다.
width, height
margin, padding, border - 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.
- MDN 또는 W3C School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 활용할 수 있다.
**1~2**
CSS는 각 HTML의 요소를 꾸미는 역할을 담당한다.
**3**
link 태그 안에서 href 속성을 통해 html과 css를 연결한다.
<link rel="stylesheet" href="index.css" />
**4**
CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가할수도 있다. 하지만 HTML은 웹 페이지의 구조와 내용만 담당하고, CSS는 디자인만 담당하도록 하여 서로의 역할을 분리하기 위해 웬만하면 CSS를 별도의 파일로 분리하여 코딩한다.
**5**
=== id ===
html 기본 태그에만 css를 적용하면, 그 태그가 사용된 모든 태그들이 함께 디자인이 변경된다. 그렇기에 id값을 주어 명확하게 표시해주고,
#id값 {
적용할 속성}
을 통해 별도로 적용할 수 있다.
=== class ===
동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class를 사용한다.
.class명 {
적용할 속성
}
을 통해 적용할 수 있다.
<li class="클래스명1 클래스명2">리스트1</li>
를 통해 공백으로 구분하여 하나의 요소에 여러 class를 적용할 수도 있다. (리스트가 4개 있다고 칠 때, 리스트 1번만 따로 다른 속성을 부여하고 싶을 때 사용)
정리하자!
id
#으로 선택
한 문서에 단 하나의 요소에만 적용
특정 요소에 이름을 붙이는 데 사용
class
.으로 선택
동일한 값을 갖는 요소 많음
스타일의 분류에 사용
**7**
텍스트를 꾸밀 때 사용하는 속성
색상 변경 : color
글꼴 속성 : font-family
글자 크기 : font-size
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
가로 정렬 : text-align
글꼴의 이름은 따옴표를 붙여 적용할 수 있다. 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있어 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있다. fallback 글꼴은 ,쉼표로 구분하여 입력할 수 있으며, 입력 순서대로 적용된다.
**8**
글꼴 크기의 단위
글꼴의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있다.
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
(1) 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 에는 px(픽셀)을 사용한다.
px은 글꼴의 크기를 고정하는 단위이기 때문에 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 크기가 고정된다. 개발자가 제목을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정한다면, 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과가 초래할 수도 있다.
픽셀은 모바일 기기처럼 작은화면이면서, 동시에 고해상도인 경우에도 적합하지 않다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우가 있다. 따라서 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.
(2) 일반적인 경우에는 상대 단위인 rem을 사용한다.
root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다.
(3) 반응형 웹(responsive web)에서 기준점을 만들 때
반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말한다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼 때, 가로 모드로 볼 때, 태블릿으로 볼 때 각각 다르기 때문에 디바이스 크기 별로 css를 달리 적용해야 한다. 이때에, 디바이스 크기를 나누는 기준을 보통 px로 정한다.
(4) 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우에는 vw, vh를 사용한다.
웹사이트의 보이는 영역을 Viewport라고 하는데, vw, vh는 각각 viewport width와 viewport height을 뜻한다.
**9**
모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 된다.
줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
박스의 종류는 줄바꿈이 되는 박스와 줄바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다. 줄바꿈이 되는 block / 줄바꿈이 일어나지 않고, 크기 지정을 할 수 없는 inline / 이 두가지 박스 종류의 특징이 섞인, 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block
inline 태그는 width, height 속성이 적용되지 않는다. 그렇기에 크기 지정을 하고싶다면 diplay: inline-block; 속성을 주어 변경한다.
border (테두리)
margin (바깥 여백) : 각각의 값은 top, right, bottom, left로 시계방향입니다.
padding (안쪽 여백) : border를 기준으로 박스 내부의 여백을 지정합니다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left입니다.
박스를 벗어나는 콘텐츠 처리
p {
height: 40px;
overflow: auto;
}
이와같이 overflow 속성을 지정하면. 박스보다 큰 콘텐츠에는 스크롤을 표시한다.
overflow에 hidden값을 준다면, 박스를 벗어나는 컨텐츠는 보여주지 않는다.
또한 overflow-x 속성과 overflow-y 속성을 이용하여 x축, y축을 지정해 스크롤 방향도 지정할 수 있다.
박스의 크기를 디자인할 때에는 박스에 적용할 여백을 고려하여 디자인 해야한다. 그렇기에 모든 요소에
* {
box-sizing: border-box;
}
를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
오늘은 html, css에 대해서 공부를 했다. 분명히 조금은 공부했던 내용이였지만 중간에 기억이 잘 나지 않는 개념들이 있어 디테일한 부분들을 많이 놓치고 있었다는 생각이 들었다. 그렇기에 더더욱 열심히 메모를 했고, w3schools를 통해 익숙해지는 시간을 보낼 예정이다. 분명히 오늘은 너무 힘든 날이기도 했지만 html과 css에 대해 놓치고 있던 개념들을 다시 한 번 잡는 시간이였고 그 과정에서 재미있는 부분도 분명히 있었다. 내일도 파이팅!
개발 공부