3주차 정리

3주차 정리

2022. 5. 7. 01:22ㆍ22-1학기/웹 기초(WEB BASIC)

WEB2 CSS - 1. 수업 소개 ~ 9. 박스 모델 써먹기

(Ctrl + O : 파일 여는 단축키)

-1. 수업 소개

웹이 처음 세상에 등장했을 때 : HTML을 이용하면 전자 문서를 만들 수 있었음 -> 컴퓨터를 통해서 정보를 표현할 수 있었고, 그 정보를 인터넷을 통해서 전 세계 누구나 볼 수 있게 되었음

-> 사람들이 웹에 열광하게 됨

-> 웹을 사용하다 보니 웹을 좀 더 아름답고 보기 좋게 만드는 방법에 대해 연구하게 됨

-> CSS가 개발되게 됨

-2. CSS가 등장하기 전의 상황

웹을 예쁘게 만드는 두 가지 방법

1. 쉽지만 한계가 있는 방법 : HTML이라는 이미 있는 언어의 디자인과 관련된 새로운 태그를 추가하는 것

2. 어렵지만 근본적인 해결책 : 디자인에 최적화된 완전히 새로운 언어를 만드는 것

웹브라우저를 만드는 사람들은 우선 쉬운 길인 1번을 선택했다가 그 한계를 깨닫고 2번 길을 선택하게 된다. 그것이 바로 CSS라는 새로운 언어이다.

<font> 태그 : 1번 방법

<font color="red">WEB</font>라고 하는 태그는 이 WEB에 대해서 어떠한 정보도 가지고 있지 않다. 다만 빨간색으로 표현해야 된다는 디자인을 나타낼 뿐이다. 디자인 자체가 정보는 아니기 때문이다.

-> 시각 장애인 분들이 봤을 때 의미가 없는 것은 정보가 아니라고 생각할 수 있다.

-<font> 태그의 문제점 : 웹페이지라고 하는 이 소중한 정보 안에 정보가 아니라고 할 수 있는 디자인에 대한 코드가 섞이면서 웹페이지가 정보로서의 가치가 현격하게 떨어지는 문제를 갖게 된다.

3. CSS의 등장

(  : 웹브라우저에게 이 기호 사이에 있는 콘텐츠를 없는 셈 치도록 하는 명령어)

-2번 방법인 CSS 언어

->이 웹페이지에 있는 모든 <a> 태그에 대해서 : a

폰트 컬러 : color

빨간색 : :red;

-CSS의 효과 : 중복의 제거 -> 이 웹페이지의 유지, 보수가 편리해지고 가독성도 높아지게 된다.

웹페이지를 디자인할 때 HTML을 이용해서 디자인하는 것보다 CSS를 이용하는 것이 훨씬 더 효과적일 수 있다.
HTML은 너무나 중요하기 때문에 HTML로부터 디자인에 관한 코드를 빼와서 HTML이 정보에 전념하게 한다.

4. CSS의 기봅 문법

-웹페이에게 어디서부터 어디까지가 CSS인지를 알 수 있게 해주는 기법

<style>, </style> 태그
style 속성을 이용하는 방법 :

style="color:red" : style 속성 , HTML 속성

->style 속성을 쓰면 그 속성의 값을 웹브라우저는 CSS의 문법에 따라서 해석해서 그렇게 해석된 결과를 style 속성이 위치하고 있는 이 태그에 적용할 것이라는 의미

<style>
    a {
      color:red;
    }
</style>

a{ ~ } : 웹페이지에서 주고 싶은 효과를 누구에게 줄 것인가를 선택한다는 점에서 선택자(Selector)라고 부름
color:blank; : 선택자에게 지정될 효과를 효과(Declaration)라고 부름 -> style 태그가 위치하고 있는 태그에게 효과를 줄 것이기 때문에 선택자라는 것을 사용할 필요가 없다.

-text-decoration : 밑줄을 만들고 없애는 속성

꾸밈, 장식이 없다 : none
밑줄을 긋고 싶다 : underline

-효과를 지정하고 난 다음에는 ;을 적어주기

5. 혁명적 변화

a { } : 이 웹페이지에 있는 모든 a를 선택한다는 점에서 선택자(Selector)라고 부름
color:red; : 선택자가 지정하는 태그들에 대해서 어떤 효과를 줄 것인가에 해당되는 것, 선언(효과, declaration)이라고 부름
colr : 속성(property)라고 부름
red : property의 값이라는 뜻에서 property value라고 부름

6. CSS 속성을 스스로 알아내기

-Property : CSS에서 어떤 효과를 의미하는 용어

-텍스트의 크기를 크게 하는 태그

font-size:-px;

-텍스트를 가운데로 정렬하게 하는 크기

text-align: center;

7. CSS 선택자의 기본

-CSS를 지배하는 두 가지 중요한 토대

효과
선택자

*링크의 색상 변경하기

: 기본-검은색, 사용자가 방문한 적이 있었던 페이지-회색, 현재 사용자가 머물고 있는 링크-빨간색

HTML과 CSS를 같은 그룹으로 묶고, 그 그룹에 대해서 폰트 컬러를 회색으로 주는 방법 -> 두 개의 태그에 대해서 클래스(class)라고 하는 HTML의 속성을 주는 방법

->class : 같은 의도에 따라 학생들을 하나로 그룹핑하는 방법

HTML : class="클래스이름"
CSS : .클래스이름 {

color:gray;

}

Class(클래스)를 여러 개 사용하는 방법

: class="이름1 이름2 이름3 .. 이름n"

->class의 속성 값에 여러 개의 값이 들어올 수 있고, 속성끼리는 띄어쓰기로 구분한다.

하나의 태그에 여러 개의 속성이 들어올 수 있고, 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.

명령을 하려는 HTML에, 보다 가까이 있는 명령어가 더 큰 영향력을 가진다.

  <style>
    a {
      color:black;
      text-decoration: none;
    }
    .saw {
      color:gray;
    }
    .active {
      color:red;
    }
    h1 {
      font-size:45px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" class="saw active">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>

->active가 saw보다 h1에 가깝게 있기 때문에 active의 명령대로 CSS가 빨간색으로 표시된다.

->권력이 같으면 가장 최근에 명령한 사람 말을 듣는다.