학습 자료 : www.youtube.com/watch?v=_YrXKxY8PTY
동영상 요약 및 정리
* CSS의 구성
1. 선택자
2. 어떤 것을
3. 어떻게
ex) h1{color : red}
-> h1 태그의/ 색을/ 빨간색으로
* !+TAB : html 문서의 기본 양식이 자동완성 된다.
* h1 태그가 여러개 일떄 꾸미고 싶은 특정 태그를 선택하고 싶다면?
1. class : 여러 개의 태그를 선택하고 싶을 때 사용되는 선택자 .으로 표시됨
(ex. class="y" -> .y)
2. id : 하나의 태그를 선택하고 싶을 때 사용되는 선택자 #으로 표시됨
(ex. id ="p" -> #p)
* 우선 순위 : id > class > 태그 이름
(ex. class는 빨간색, id는 보라색이면 보라색으로 표시됨)
* 마크업 : 웹 페이지의 뼈대를 잡아주는 HTML을 작성하는 일
* HTML문서에서의 input태그 : 입력하는 칸을 만드는 태그
* HTML문서에서의 form태그 : 정보를 전송하는 태그
*HTML과 CSS연결하기 head태그 안에 link태그 사용
*CSS에서 가운데 배치하는 방법 : text-align : center; 사용
(모르는 명령어를 구글링함으로서 머릿속 메모리를 아끼자)
*개발자 도구(F12) 사용하기
*개발자 도구의 박스의 숫자부분을 누르고 위, 아래를 방향키를 누르면서 세부적인 조절이 가능하다.
*inline 요소 : 문자 등 직선적인 HTML 요소
(반대개념 -> block요소 : 이미지 등 부피가 있는 요소)
*span태그 : inline요소를 나타냄. 글자를 나타내는 태그
*띄어쓰기 : 자손을 표시하는 css 문법
(h1 span => h1 태그의 모든 자손 중 span 태그만 선택)
*nth-child : 특정 자식 태그를 선택하는 css의 문법(외우지 말고 검색을 통해 찾기)
*부모-자식 태그 : 감싸는 상위 태그를 "부모 태그" 안쪽의 태그를 "자식 태그"라고 함
*자손 : 자식의 자식의 자식 등 모든 하위 태그를 포함하는 개념
*개발자 도구의 스포이드를 이용해 정확한 색 추출 가능
*Bootstrap 활용하여 검색창 만들기(Documentation -> Components)
(이 외에도, Materialize, semantic ui를 활용하자)
*내 컴퓨터에 저장된 CSS 파일 뿐만 아니라 온라인 상(bootstrap)의 CSS 파일도 <link>태그로 연결 가능
(<link rel="stylesheet" href="style.css">보다 위에 넣어주어야 한다.)
*하나의 태그에 class 여러개 적용하는 방법 : 띄어쓰기로 여러개 작성
*mt-5 => 위쪽 간격을 5정도 띄우라는 Bootstrap에서 제공하는 CSS
*placeholder : 입력 창에 써져있는 지워지는 글자
*구글 검색의 원리 : google.com/search?q=검색어
*form 태그에서 action은 어디 주소로 향할 건지 나타내고 method는 데이터의 전송 방식이다.
데이터의 전송방식 GET : 주소창에 정보를 포함하여 전달하는 정보 전송 방식
데이터의 전송방식 POST : 주소창에 정보를 표시하지 않고 내부적으로 정보를 전달하는 정보 전송 방식
*CODEPEN 또한 유용한 HTML, CSS 정보들을 가지고 있다.
HTML 파일
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soogle</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
<span>S</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>
<form action="https://www.google.com/search" method="GET">
<div class="mx-auto mt-5 search-bar input-group mb-3">
<input name="q" type="text" class="form-control rounded-pill" placeholder="Soogle 검색 또는 URL입력" aria-label="Recipient's username" aria-describedby="button-addon2">
</div>
</form>
</body>
</html>
|
cs |
CSS 파일
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
h1 {
margin-top: 230px;
font-size: 90px;
text-align: center;
}
h1 span:nth-child(1) {
color :#4285f4;
}
h1 span:nth-child(2) {
color :#ea4335;
}
h1 span:nth-child(3) {
color :#fbbc05;
}
h1 span:nth-child(4) {
color :#4285f4;
}
h1 span:nth-child(5) {
color :#34a853;
}
h1 span:nth-child(6) {
color :#ea4335;
}
.search-bar {
width : 500px;
}
|
cs |
실행시킨 모습
