개발일지 세번째 - HTML과 CSS에 대하여
지난 시간에 HTML에 대하여 다루었고, 오늘은 HTML과 쌍으로 묶여서 다니는 CSS(Cascading Style Sheet)의 기본에 대해 다뤄보자.
개발관련한 글들은 이미 인터넷에 너무나 많아서 개인적으로 빠르게 찾아보려고 하거나 개인적으로 이해가 안됐던 부분들에 대해서 정리할 예정이니 부족한 정보들은 다시금 구글링을 통해 얻으시길 추천드린다.
CSS는 HTML을 꾸미는 용도다. HTML로 뼈대를 쌓고 그 뼈대에 살을 이쁘게 붙이려는 목적으로 CSS를 사용하는데 역시나 굉장히 많은 CSS 태그들이 존재하기에 이를 한번에 다 외우고 시작하는 것은 매우매우 어렵다.
따라서 CSS의 대략적인 사용법을 익혀놓고 그때 그때 필요한 CSS를 찾아서 사용하는 것이 빠른 숙지 방법이겠다.
CSS의 활용
CSS는 HTML 안에 head안에서 style 태그로 작성해도 작동하고 CSS를 HTML안에 모두 정의하기에는 덩치가 너무 커지므로 CSS 파일을 따로 만들어서 HTML안에서 참조하는 것도 가능하다.
CSS는 <div>나 <i> 태그 같은 HTML 안에 사용하려면 아래와 같이 태그 안에 style을 넣고 사용하면 된다.
<div>
일반 div 태그 사용
</div>
-------------------------------
<div style = "color : white;">
이 글씨는 흰색이다.
</div>
아래 <div> 태그를 쓴 글씨는 흰색을 가지게 된다. 이런식으로 다양한 태그를 필요할 때마다 태그안에 넣어서 사용할 수도 있고, 반복적으로 사용되는 것들은 <head> 태그안에 <style>로 따로 정의 하여 사용할 수도 있다.
<!DOCTYPE html> 이 문서는 HTML이라고 정의
<html lang="en"> 기본 언어가 영어라고 정의
<head>
<meta charset="UTF-8"> 문서 성격의 정의하는 여러 메타 데이터가 들어간다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OLED의 모든 것 | 홈</title> 페이제 제목
<style>
.mytitle { 정의하려는 class 이름
color: white; 글자색
width: 300px; 가로크기
height: 200px; 세로크기
background-image: url('https://https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
배경화면 링크
background-position: center; 배경화면의 위치
background-size: cover; 배경화면의 크기
border-radius: 10px; 테두리 엣지를 둥글게(지름 크기)
text-align: center; 텍스트 정령
padding-top: 40px; 그림 안쪽의 위 여백
margin-top : 40px; 그림 바깥쪽의 위 여백
}
.wrap { 가운데 정렬시킬 방법
margin: 10px auto; 바깥여백을 위로 10px를 주고 나머지는 가운데 정렬
width: 300px;
}
</style>
</head>
<body>
<div class="wrap"> mytitle을 감싸서 가운데 정렬할 클래스를 만든다
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<div>
<p>
ID: <input type="text" />
</p>
<p>
PW: <input type="password" />
</p>
</div>
<button>로그인하기</button>
</div>
</body>
</html>
위 코드를 적용하면 위와 같은 모양의 간단한 로그인창을 구현할 수 있다.
CSS 주석달기
주석은 임시로 코드를 활성화 하지 않거나,
나중에 코드를 보고 이해하기 쉽도록 설명을 붙여놓고 싶을 때 사용한다.
/* 한줄일 경우에 쓰는 주석 */
<!-- 여러줄에
사용할때
쓰는 주석 -->
CSS 파일 분리
위에 언급한대로 CSS는 <head>안에 <style>로 넣을 수도 있지만 정의하려는 class가 많아질수록 HTML 코드의 시인성이 매우 떨어지므로 index.css 등으로 문서파일을 하나 만든다음에 CSS를 정리해서 넣는 방법이 있다.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
빠른 공부를 위하여 스파르탄코딩클럽(https://spartacodingclub.kr/)의 웹 개발 종합반을 수강하여(내돈내산) 진행했다.
코딩 분야는 강좌 수강은 처음이지만 다른 분야 강의들과 비교해보아도 시원시원한 강의 실력이 아주 매력 있다.
100% 국비지원까지 되니 나처럼 비전공자나 이제 개발에 입문하려는 학생들에게는 너무 좋은 입문 포인트가 아닐까 싶다.
https://spartacodingclub.kr/?f_name=%EA%B9%80%EB%82%A8%ED%98%B8&f_uid=6311501c4c8e3450f6ec7845
스파르타코딩클럽
5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의
spartacodingclub.kr
위에는 초대 코드가 포함된 링크인데 위 링크로 가입하여 수강하면 무려 5만원의 할인 혜택이 있다.
난 그냥 검색으로 들어가서 이 혜택을 못 받았다...
아무튼 관심이 있다면 꼭! 혜택을 받아보자.
'코딩 공부 이야기 > 개발일지' 카테고리의 다른 글
| [코딩생존일지]스파르톤 밤샘? 코딩 릴레이 행사 참석 (2) | 2022.09.18 |
|---|---|
| [개발일지 #4] 구글 웹폰트 적용하기 (0) | 2022.09.14 |
| [개발일지 #2] HTML과 CSS 개념(1) - HTML (0) | 2022.09.08 |
| [개발일지 #1] 서버와 클라이언트 개념 (0) | 2022.09.08 |
| [개발일지 #0] 비전공자로 도전하는 어플, 게임 개발 (6) | 2022.09.05 |
댓글