오늘은 웹페이지의 디자인적 요소를 더해주는
CSS에 대해 조코딩 유튜브를 보며 공부해보았습니다!
CSS에 대한 기본 개념, 간단한 실습, 검색을 통해 해결방법을 찾는 법 등에
대해서 정리보았습니다.
🎨CSS란?
HTML을 꾸며주는 역할을 하는 언어
특정 HTML 요소(=태그)를 지정해서
위치, 크기, 색을 변화시키는 등 HTML 요소에
변화를 줄 수 있습니다.
ex)
HTML파일: <h1>사과</h1>
-> 사과
CSS파일 : h1{color : red;}
(<h1>태그의 색을 빨간색으로 바꾸겠다)
-> 사과
이때, 여러 요소에 각각 다른 효과를 주고 싶다면,
HTML 태그에 class나 id로 이름을 붙여주어
특정태그만 선택해 효과를 줄 수 있습니다.
class는 여러 요소를 공통적으로 바꿀 때 사용되는 선택자.
ex)
.클래스이름 {색상, 크기 등 요소 : 변화값;}
id는 단 하나의 요소를 선택할 때 사용되는 선택자#
ex)
#아이디이름 {색상, 크기 등 요소 : 변화값;}
id는 class위에 덮을 수있고, class는 h1과 같은 태그 위에 덮을 수 있습니다.
id > class > 태그 이름
순으로 센 순서입니다.
같은 요소에 대해 class가 노랑이고, id가 보라색이면 보라색으로 표현.
오늘은 기본적인 이해를 도울 수 있는
수준으로 실습해보려고 합니다!
CSS에 대해 자세히 독학하고 싶으신 분들은
코드카데미 혹은
https://www.codecademy.com/learn/paths/learn-how-to-build-websites
생활코딩과 같은
https://opentutorials.org/course/2418/13339
무료 코딩 교육 사이트를 이용해보세요!
🎨CSS 실습 : Google 검색 페이지 따라 만들기
1) 파일 생성하기
먼저, HTML과 CSS파일을 담을
폴더를 하나 생성하고
Visual Studio Code나 Atom같은 코드 편집기에서
Open folder로 해당 폴더를 열어줍니다.
그 폴더에서 New File로
index.html과 style.css 파일을 각각 만들어 줍니다.
2)HTML 기본 양식 작성하기
HTML의 head같은 기본 양식은
느낌표와 탭을 누르면 자동완성이 됩니다!
! + Tab버튼 (기본 태그양식 자동완성 단축키)
<html lang = en> 태그와 <title>태그는 각자 원하는
언어와 페이지 이름으로 변경해줍니다!
저는 한국어 페이지와 Google 짝퉁 페이지를 만들 것이기 때문에,
Coogle이라고 적었습니다.
<html lang = "언어">
웹페이지가 무슨 언어로 되어 있는지에 대한 코드
(en = 영어, ko = 한국어...)
<title>
웹페이지의 제목을 표시하는 태그
3) HTML 마크업하기
*마크업 : 웹페이지의 뼈대를 잡아주는 HTML을 작성하는 일
Google 웹페이지처럼 간단하게
제목과 검색창만 만들어보려고 합니다!
<input>
입력하는 칸을 만드는 태그
<form>
정보를 전송하는 태그
4) CSS와 HTML 파일 연결시키기
HTML 파일의 <head>태그 사이에
link:css 태그를 넣어주면됩니다!
이 역시 코드 편집기 이용 시, link만 입력해줘도
link:css를 찾아서 자동입력이 가능합니다!
그럼,
<link rel="stylesheet" href="style.css">
이와 같은 태그가 완성되는데, href = "파일경로" 입력해주면 됩니다.
ex) href = "C\내 문서\style.css"
지금은 HTML파일과 CSS파일이 같은 폴더에 있으니
그냥 CSS파일의 파일명(style.css) 상태로 두셔도 됩니다!
5) CSS 작성하기
CSS 코드도 그때그때 필요한 것을 찾아서 작성하면 됩니다.
이제 글자를 가운데로 정렬해볼건데요!
정렬하는 CSS 코드를 모를 때는
css center 이런 식으로 구글에 검색해서 찾아쓰면
다 외우지 않고, 입력하지 않아도 됩니다!
텍스트를 중앙정렬하는 CSS 코드는 다음과 같습니다.
text-align: center;
그럼 화면이 아래와 같이 나타나게 되는데요!
Coogle이라고 입력한 h1이 중앙으로 정렬됐죠?
근데, Google 홈페이지처럼 글자랑 검색창을
좌우 뿐 아니라 상하 가운데로도 배치하고 싶습니다.
이때, 개발자 도구(F12탭)를 이용하면 아주 간단하게 바꿀 수 있습니다!
이 부분은 하단 링크의 유튜브 영상 6분 55초쯤부터
보고 따라하는게 훨씬 이해가 잘 될 것 같습니다.
https://www.youtube.com/watch?v=_YrXKxY8PTY
h1{
text-align: center;
margin-top: 230px;
font-size: 90px;
}
개발자도구를 참조하여 이렇게 입력해주었습니다.
입력한 내용은 하단처럼 잘 적용되었습니다.
이제, CSS를 사용해 글자 색을 바꿔보겠습니다.
글자 색을 하나하나 다 이름을 지정해주는 건
굉장히 귀찮은 일입니다.
이때, 확장 프로그램을 이용하면 편리한데요!
VScode에서 HTML태그를 하나씩 감싸주는
htmltagwrap이라는 확장프로그램(extensions)을 설치해주세요.
다운 후, Alt + W 단축키를 사용하시면 쉽게 기능을 사용할 수 있습니다.
글자에 효과를 줄 것이기 때문에,
Coogle이라는 글자의 각 요소를 inline요소를 나타내는
span 태그로 감싸보겠습니다.
inline 요소 : 문자 등 직선적인 HTML요소
(↔block 요소 : 이미지 등 부피가 있는 요소)
span 태그 : 글자를 나타내는 요소
<h1>
<span>C</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>
이런 식으로 글자 하나하나를 span 태그로 묶어줍니다.
이렇게 span으로 묶인 글자들은 h1태그의 자식 태그가 됩니다.
이제 :nth-child 를 이용해서, h1태그의 각 글자들에 색상을 줘볼게요!
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
}
이렇게 글자마다 각 색상값을 적용해주면 됩니다!
구글 메인 페이지에서 색상값을 추출할 때는
개발자도구(F12) 탭 - element.style{} 요소에 color:아무컬러 -
네모 박스 클릭 - 스포이드 클릭 - 추출하려는 색상 클릭
해서 복사해 쓰시면 됩니다.
이제 검색창을 바꿔보겠습니다.
검색창을 직접 CSS코드를 입력해서 디자인해도 되지만,
이런 요소들의 CSS를 이미 만들어 둔 사이트들이 있습니다.
Bootstrap이나 Materialize, Semantic-UI, codepen 등의 사이트인데요!
일단 가장 유명한 Bootstrap에서
input 박스를 가져오겠습니다!
Bootstrap 메인에서
Document - 검색창에 input 검색 - 스크롤해서 맘에 드는 요소 찾기
-해당 요소 하단에 CSS 복사
이때 비슷한 요소들 2~4개 정도가 묶여 있는데요
숫자로 묶어둔것처럼, 순서대로 CSS도 정리되어 있습니다.
저는 2번째꺼를 쓰고 싶어서 2번째 CSS코드를 복사해
HTML 문서에 아까 작성했던, 기본 input박스 대신 넣겠습니다.
그리고 CSS 파일과 연결해줄 수 있도록 링크 태그를 가져와줍니다.
Bootstrap 메인 - Documentation - Getting started
들어가면, CSS 부분에서 복사하세요!
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
위의 내용을 복사해 CSS파일과 연결했던 link css 태그 위쪽에 연결해주세요!
이제 input 박스도 Coogle글자 위치와 크기를 바꿨을 때처럼
조정해주겠습니다.
div class = 바로 뒷쪽에 'search-bar '로 이름을 지정해줍니다.
스페이스바로 띄어쓰기 넣어주면,
하나의 태그에 class 여러개를 지정해줄 수 있습니다.
CSS파일에는
.search-bar {
width : 500px;
}
를 입력해주세요.
bootstrap에서 center를 검색하면
요소들을 중앙정렬할 수 있는 방법도
쉽게 찾을 수 있습니다.
mx-auto를 HTML파일 class 뒤에 붙여넣어줍니다.
<div class="mx-auto search-bar input-group mb-3">
이런 식으로 말이죠!
그 옆에 mt-5을 입력해주면 (margin top 5)
글자와 input 박스 사이의 간격도 쉽게 조정할 수 있습니다.
<div class="mx-auto mt-5 search-bar input-group mb-3">
이렇게 Bootstrap에서
미리 정의된 Class를 잘 검색해서 쓰기만 해도
시간을 많이 줄일 수 있겠죠?
이제는 검색창의 placeholder를 변경해보겠습니다!
input 태그에 있는 placeholder="원하는 문구"로 수정해줍니다.
Bootstrap의 Border 부분을 찾아보면,
요소들의 테두리를 둥글게 만들어주는
class도 이미 만들어진 것이 있습니다.
class="rounded-pill"
이걸 사용하면 되는데요.
input 태그 안의 class에
class="form-control rounded-pill"
이런식으로 적용해주시면 되겠죠.
button은 쓰지 않을 거라, button 부분 태그는 다 지워주세요.
그리고, 실제로 input박스에 검색어를 입력했을때
구글 검색으로 연결될 수 있도록,
form태그의 속성을 입력해줍니다.
form태그의
action은 어디로 향할건지에 관한 주소
method는 데이터의 전송방식 입니다.
(*Get 방식 : 주소창에 정보를 포함하여 전달하는 정보 전송 방식
Post 방식 : 주소창에 정보를 표시하지 않고 내부적으로 정보를 전달하는 정보 전송 방식)
저는 주소창에 보낼 것이라 Get 방식의 method를
action은 구글 검색 주소로
입력받는 내용을 q라는 이름에 담아서 보낼겁니다.
이제 만들었던 HTML 파일에서 검색창에
검색어를 넣고 검색하면!
다음과 같이 구글 검색으로 연결되는 것을 볼 수 있습니다!
*위 내용은 조코딩 유튜브를 보고 실습한 내용을 정리한 것입니다.
자세한 내용과 영상은 링크를 확인하세요!
https://www.youtube.com/watch?v=_YrXKxY8PTY
'꾸준한 독학' 카테고리의 다른 글
| 코딩 독학하기4 : 도메인의 원리, 무료 도메인 사이트 추천 (0) | 2020.04.23 |
|---|---|
| 코딩 독학하기3 : 검색 엔진의 최적화 / 내가 만든 사이트 포털에서 검색되게 하기 (조코딩 유튜브로 공부하기) (0) | 2020.04.22 |
| 코딩 독학하기2 : 내가 만든 사이트 인터넷에 공개하기(.COM 도메인, HTTPS 적용하기,HTML템플릿 수정하기) (조코딩 유튜브로 공부하기) (0) | 2020.04.21 |
| 코딩 독학하기1 : HTML 기본개념 정리 (조코딩 유튜브로 공부하기) (0) | 2020.04.21 |
| 코딩 입문하기 : 코딩 기본 용어 개념 정리 (조코딩 유튜브로 공부하기) (0) | 2020.04.21 |
