[CSS] 생활코딩 1~7 _ 폰트 색, 밑줄, 크기, 정렬, 선택자

SMALL

안녕하세요~ 보라해바라기입니다!

HTML로 웹페이지의 기본 뼈대를 만들어줬다면 그 후에는 살을 붙여야겠죠?

오늘부터는 웹페이지를 디자인하는데 필수적인 CSS에 대해 배우기 시작했답니다!

웹개발자가 되어야지! 라고 다짐하고 난 후, 공부해야 하는 필수 언어에 CSS가 있어서

처음에는 걱정이 앞섰답니다.

HTML은 자세히 몰라도 코딩에 관심이 없을 때부터 들어본 적은 있는 단어라 친숙했는데

CSS는 아예 처음 듣는 단어였기에 많이 낯설었어요 ㅎㅎ

하지만 오늘을 시작으로 꾸준히 하다보면 많이 친숙해지겠죠?

오늘 배운 CSS 개념을 정리하면서 글을 시작해보겠습니다~

본격적으로 개념들을 알아보기 전, 한 가지 참고 사항을 가지고 왔어요~

CSS가 웹 디자인을 위한 언어다보니 어떻게 디자인 할 것인지에 대한 상세한 설명이 필요함을 느꼈답니다!

그렇다면 웹 실행에 영향을 미치진 않으면서 상세한 설명을 기록할 수 있게 도와주는 태그는 무엇일까요?

을 이용하면 된답니다!

제가 예전에 배운 C언어에서 // 를 이용해 주석 처리를 했는데 이와 같은 역할을 하는 것 같아요 ㅎㅎ

또한 <style> 문장 </style>을 사용하면

"문장을 CSS라는 언어의 문법에 맞게 해석해서 처리하라"는 의미를 가지게 됩니다!

위의 태그를 사용해서 폰트에 다양한 디자인적 요소들을 설정할 수 있게 돼요~

1. 폰트 색

웹 디자인은 대표적으로 2가지 방법을 통해 가능합니다.

style 태그를 사용하는 것, style 속성을 사용하는 것!

그렇다면 style 태그를 사용하면 어떻게 나타낼 수 있을까요?

이는 "HTML파일에 속한 모든 a태그의 색깔이 지정한 색깔로 바뀐다는 것"을 의미합니다.

1억개의 a태그가 있다고 가정할 때,

HTMl 태그를 사용하면 1억개의 태그들을 각각 수정하여야 하지만

CSS를 이용하면 한 번의 수정으로 1억개의 태그들의 색을 다 바꿀 수 있으니 효율적으로 웹을 디자인 할 수 있겠죠?

이번에는 style 속성을 사용해 폰트의 색을 표현해보겠습니다.

style 속성을 이용하면 모든 a 태그가 아닌 한 개의 태그에 색을 지정할 수 있답니다!

문장 1의 색이 지정한 색으로 바뀌게 되고, 여기서 style=" "은 HTML의 속성이라고 할 수 있습니다 ㅎㅎ

2. 폰트 밑줄

스타일 태그의 a태그 안에 text-decoration: none; 을 넣어주면 밑줄 없어짐.

이렇게 중괄호 안에 text-decoration: none; 을 입력해주면 모든 a태그에서 자동으로 생기던 밑줄을 없앨 수 있답니다.

그렇다면 하나의 a 태그에 밑줄을 삽입하고 싶다면 어떻게 하면 될까요?

위에서 살펴본 것처럼 하나의 태그를 수정하고 싶다면 style 속성을 이용해주면 되는데요!

이런 식으로 text-decoration: underline을 넣어주면 문장2에만 밑줄이 다시 생긴답니다~

정말 신기하지 않나요?

3. 폰트 크기와 정렬

h1 {
      font-size:45px;
      text-align:center;
    }

폰트 크기를 조절할 때는 font-size: (숫자)px 나 (숫자)%

폰트를 정렬할 때는 text-aling: (center, left, right ...) 를 사용하게 됩니다~

<!doctype html>
<html>
<head>
<title>보해의 인생_Past</title>
<meta charset="utf-8">
<style>
  a {
    color:purple;
    text-decoration: none;
  }
  h1 {
    font-size:45px;
    text-align: center;
  }
</style>
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<h4>목차</h4>
<ol>
  <li><a href="1.html" style="color:red;text-decoration:underline"> 과거</a></li>
  <li><a href="2.html"> 현재</a></li>
  <li><a href="3.html"> 미래</a></li>
</ol>
<h2>보라해바라기의 과거</h2>
<p> 보라해바라기의 과거는 크게 초등학교, 중학교, 고등학교 시절로 나뉠 수 있다.</p>
<ul>
  <li><a href="4.html">초등학교</a></li>
  <li><a href="5.html">중학교</a></li>
  <li><a href="6.html">고등학교</a></li>
</ul>
</body>
</html>

우리가 중괄호 안에 디자인적인 요소를 삽입할 때 세미콜론( ; )으로 여러 요소들을 구분해주어야합니다.

이를 한 번 상기시키고 다음으로 진행하도록 하겠습니다 ㅎㅎ

4. 선택자

기존에 만들었던 웹페이지에서

모든 a태그의 기본 색은 보라, 이미 봤던 것은 회색, 현재 있는 페이지는 빨강으로 설정하려 합니다.

지금까지 배웠던 것을 바탕으로 위 조건에 부합하는 코드를 만들 수는 있지만

선택자를 사용해서 만들어보려 합니다.

예를 들어 과거, 현재, 미래라는 목록이 있고 지금 "현재"페이지를 보고 있다고 가정하겠습니다.

보라	회색	빨강
미래	과거, 현재	현재

목록들은 이런 카테고리에 속하게 됩니다.

과거와 현재는 회색이라는 같은 카테고리에 속하기 때문에 class로 묶을 수 있고

"이미 봤다"는 표시인 saw 속성을 사용해서 한 그룹으로 묶어줍니다.

그 후 style 태그에서 .saw를 이용하면 회색이 적용되게 되죠.

이처럼 하나의 태그를 공동으로 제어할 수 있게 됩니다!

또한 여기서 현재는 회색 카테고리인 동시에 빨강 카테고리죠?

그렇다면 더 구체적인 상황을 위에 제시해야 합니다.

이 상황에서는 빨강, 회색, 보라 순으로 나열해야겠죠?

현재 페이지를 빨강으로 표시하기 위해서는 id=active를 class 태그 안에 넣고

.saw위에 #active를 넣어주면 적용이 된답니다!

<!doctype html>
<html>
<head>
<title>보해의 인생_Present</title>
<meta charset="utf-8">
<style>
  a {
    color:purple;
    text-decoration: none;
  }
  #active {
    color: red;
  }
  .saw {
    color:gray;
  }
  h1 {
    font-size:45px;
    text-align:center;
  }
</style>
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<h4>목차</h4>
<ol>
  <li><a href="1.html" class="saw"> 과거</a></li>
  <li><a href="2.html" class="saw" id="active"> 현재</a></li>
  <li><a href="3.html"> 미래</a></li>
</ol>

( 선택자 설명에 필요한 부분만 코드 첨부 했습니다^_^ )

오늘 배운 내용 중에서 선택자에 관한 설명이 잘 이해가 안되는 것 같아요..

블로그로 내용을 정리하면서 조금 익숙해지긴 했지만

제 웹페이지를 만들 때 이 부분을 많이 사용해보아야겠어요 ㅎㅎ

오늘도 새로운 것을 많이 배워 좋은 하루였습니다^_^

장마가 시작되어 비가 추적추적 오는데 기분 관리 잘 하시고 좋은 하루 되세요~~

내일 또 뵙겠습니당:)

728x90

저작자표시

'HTML & CSS' 카테고리의 다른 글

[CSS] 생활코딩 12 ~15 _ 미디어쿼리, CSS코드의 재사용 (0)	2021.07.09
[CSS] 생활코딩 8~11 _ 박스모델, 그리드 (0)	2021.07.07
[HTML] 생활코딩 19~20, 부록 _ 윈도우에서 웹 서버, 동영상 삽입, 댓글과 채팅 기능, 웹사이트 방문자 분석 (1)	2021.07.05
[HTML] 생활코딩_복습 겸 웹페이지 보강 (1)	2021.07.04
[HTML] 생활코딩 15~18 _ 링크, 웹, 클라이언트와 서버, 웹호스팅 (2)	2021.07.03

심리학도의 좌충우돌 개발 여행기