HTML/CSS 수업을 마치며

1. 정렬하기

[HTML]

div 태그: 레이아웃을 나누기 위해 사용하는 태그

img 태그: 이미지를 표시하는 태그 (src 로 이미지 지정)

a 태그: 링크를 연결하는 태그 (href 로 링크 지정)

p 태그: 문단을 표시하는 태그

h 태그: 제목을 표시하는 태그

input 태그: 사용자로부터 입력을 받는 태그

 

[CSS]

width: 가로 길이 지정

height: 세로 길이 지정

flex: 정렬을 위해 사용하는 display 의 값 (display: flex)

justify-content: 메인 축 중앙 정렬 (초기에는 가로 축)

align-items: 교차 축 중앙 정렬 (초기에는 세로 축)

color: 글자 색 지정

background-color: 배경 색 지정

margin: 테두리 밖 여백

padding: 테두리 안 여백

border: 테두리 설정 (border: solid 1px black)

 

CSS를 불러오는 방법 ( VScode 에선 link 입력후 tab 키를 누르면 편하다.)

<link rel="stylesheet" href="./css/파일명.css">

2. 반응형

[상대단위]

% : 부모 요소 크기를 기준으로 비율 지정

vh, vw : 뷰포트 크기를 기준으로 비율 지정 

em, rem : 폰트 크기를 기준으로 비율 지정

 

*vh, vw, em, rem은 처음 보고 처음 써보는 속성들이었는데 다시 한번 더 사용해보며 익숙해져야 겠다.

 

[미디어쿼리]

max-width, min-width 를 활용해서, 미디어쿼리가 적용될 화면크기를 지정

@media (max-width: 425px) {

}

3. JS 기본

[함수]

function showMsg(msg) {
	alert(msg)
}

[조건문]

if (조건문1) {
	조건문1이 참일때 실행
} else if (조건문2) {
	조건문1이 거짓이고, 조건문2가 참일때 실행
} else {
	조건문1, 2 다 거짓일때 실행
}

[반복문]

for (let i = 0; i < 3; i++) {
	alert(i)
}

[자바스크립트 불러오기]

<script src="./js/파일명.js"></script>

4. DOM API 기본

[DOM 이란?]

문서 객체 모델(DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 

DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

링크

DOM 소개 - Web API | MDN

 

[요소를 가져오기]

(클래스의 경우, getElementsByNamee 임에 주의! → 배열이라서 []로 요소가져와 줘야함!)

let firstBox = document.getElementById('firstBox');

[특정 요소가 이벤트에 반응하도록 하기]

click: 요소를 클릭했을 때

focus: 인풋 창에 커서를 두었을 때

blur: 인풋 창에서 떠났을 때

keypress: 특정한 키를 눌렀을 때

function showMsg() {
    alert('클릭!')
}

firstBox.addEventListener('click', showMsg)

 

 

총 16시간에 걸친 HTML/CSS 수업이 오늘로서 끝이 났다. 
이전 학교에서 잠깐 배웠을때랑 또다른 느낌으로 해맨것도 있었고 알던내용을 다시한번 복기하게 되는 좋은 시간이었습니다.