🔗 네이버 지도의 UX를 이해하고,그 행동에 따라 프로덕트 내부에 설계된 시스템의 작동 과정을 파악했던 지난 과제 링크
웹 페이지의 개발자 도구는 페이지에서 [F12]클릭
또는 [도구] 더보기 - [개발자 도구] 클릭하면 개발자 도구를 활용해 HTML, CSS, Javascript를 탐색해볼 수 있다.
더 자세히 개발자 도구에 대해 알고 싶으시다면 여기를 클릭해주세요.
메인 루트 <html>
: HTML 문서의 루트(최상위 요소)를 나타내므로 root 요소라고도 한다. 다른 모든 요소는 이 요소의 자손이어야 한다.
<html lang="ko"/>
<html>
요소에 유효한 lang 선언이 존재해야 <title>
과 같은 <head>
내부의 중요한 메타데이터를 정확한 발음으로 표현할 수 있다.<head><head/>
: 이 요소는 페이지를 조회하는 사람들에게 보여주는 콘텐츠가 아닌 HTML 페이지에 포함하고 싶어하는 모든 재료들을 위한 컨테이너 역할을 한다. <body><body/>
: HTML 문서의 내용을 나타낸다. 문서에는 이러한 요소가 하나만 있을 수 있다.CSS 를 여러 페이지에 연결할 수 있으므로, CSS 를 문서에 첨부하는 가장 일반적이고 유용한 방법이며, 모두 동일한 스타일 시트로 CSS 스타일을 지정할 수 있다.
외부 스타일 시트는 CSS 확장자가 .css 인 별도의 파일로 작성되고, HTML 요소에서 참조하는 경우가 있다.
외부 스타일 시트 예시는 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>나의 CSS 실험</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>헬로우 월드!</h1>
<p>이것은 나의 첫 번째 CSS 예제입니다</p>
</body>
</html>
<link rel="stylesheet" href="styles.css">
와 같이 요소의 href 속성은 styles.css와 같은 css 외부 파일을 참조해야 한다.
CSS파일(styles.css) 예제
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
예시)
먼저 [개발자 도구] 에서 왼쪽 상단의 아이콘을 클릭한다. (아래 그림 참고)
그 후 내가 스타일을 보고 싶은 영역을 클릭한다.
선택한 영역의 요소가 [개발자 도구]에서 나타난다.
영역의 요소 div를 확인하면 그 아래에 스타일에서 CSS 스타일을 자세히 볼 수 있다.
position: relative;
z-index: 110;
height: 42px;
padding-left: 45px;
border: 2px solid #19ce60;
border-radius: 5px;
position
속성은 문서 상에 요소를 배치하는 방법을 지정한다.z-index
속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정한다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.height
속성은 요소의 높이를 지정한다.padding
속성은 요소의 네 방향 안쪽 여백 영역을 설정한다. padding-top
, padding-right
, padding-bottom
, padding-left
의 단축 속성이다.border
단축 속성은 요소의 테두리를 설정한다. border-radius
속성은 요소 테두리 경계의 꼭짓점을 둥글게 만든다.
- border 구성 속성 구문
/* 스타일 */ border: solid; /* 너비 | 스타일 */ border: 2px dotted; /* 스타일 | 색 */ border: outset #f33; /* 너비 | 스타일 | 색 */ border: medium dashed green; /* 전역 값 */ border: inherit; border: initial; border: unset;
<body>
태그 안에 <script src=".js파일명"></script>
가 있다. <script src="runtime-es2015.06064bdaa2df7336affa.js" type="module"></script>
HTML 요소 참고 - MDN문서
HTML 태그 참고 - MDN문서
드림코딩-입문: HTML, CSS, Javascript
지난 몇 개월간 프론트엔드 개발 공부를 하면서 구조적인 것을 보기보단 Javascript 문법이랑 리액트 프레임워크, 라이브러리 등 구현에 열을 올렸다. 이번 과제는 너무 섬세하게 보기보다는, 구조적인 측면에서 다시 익히며 화면의 큰 구성에 대해 알아보는 것으로 러프하게 과제를 진행했다. 프론트엔드 구현할 때는 html 큰 구조는 VScode가 알아서 다 자동완성해주고 해서 자세히 안봤는데... 과제를 하려고 찾아보다 보니 굉장히 깊게 들어갈 것 같아서 일단 오늘은 큰 구조만 다시 복습했다.