[생활코딩] WEB2 CSS. 선택자와 속성

오늘은 공부 중/강의 공부

[생활코딩] WEB2 CSS. 선택자와 속성

이도토리 2021. 6. 17. 15:46

1. HTML 문법에 태그를 추가하는 것

2. CSS

해석할 수 있는 정보를 가지고 있는 기존 태그와 달리

(ex. <a> - 링크 정보, <h1> - 제목이라는 정보)

디자인 태그(ex. font)는 어떤 정보도 가지고 있지 않다.

정보가 아닌 디자인 코드가 섞이면 웹페이지가 정보로서의 가치가 현격히 떨어진다.

유지보수적으로도 CSS 코드가 분리되는 것이 훨씬 용이하다.

CSS와 HTML은 완전히 다른 문법의 언어.

1번째 방법. style 태그 활용

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

CSS를 통해 중복된 코드를 단 하나의 코드를 통해 제거할 수 있게 된다.

또한 가독성도 좋다.

a {

}

누구에게 적용할지 선택한다는 의미에서 선택자 = selector

color:black;
text-decoration:none;

효과, 선언 = declaration

; 를 적어주면 한 줄에 있어도 잘 동작함.

* text-decoration을 none 해주면 a태그의 밑줄도 사라진다.

CSS 도입의 배경

1. style 태그 안에 갇혀 있기 때문에 중요한 HTML이 정보에 전념하게 만들고, 디자인 기능을 뺏어온 것.

2. CSS를 통해 웹페이지를 디자인하는 것이 훨씬 더 효율적.

2번째 방법. style 속성 활용

  <li><a href="2.html" style="color:red; text-decoration:underline">프로젝트</a></li>

style 속성을 활용하면 css 문법으로 해석하고, 해당 태그에 그 디자인을 적용한다.

style=""은 html의 속성. 그 값으로 반드시 css의 효과가 들어온다.

style 속성을 쓰는 경우 선택자를 쓸 필요가 없다. 직접 선택해주기 때문에.

color(Property): red(Property Value);

글자 크기 바꾸고 싶을 때 css text size property 검색하기.

가운데 정렬 하고 싶을 때 css text center property 검색하기.

스스로 검색해서 알아내는 힘이 있어야 함.

<style>
  a {
    color:black;
    text-decoration:none;
  }
  h1  {
    font-size: 45px;
    text-align: center;
  }
</style>
</head>

굳이 다 외울 필요가 없다.

Class 선택자.

Class = grouping하다, 묶는다.

.을 붙여주면 class를 가리키는 선택자

#을 붙여주면 id를 가리키는 선택자

<style>
.saw {
  color:gray;
}
.active{
  color:red;
}
</style>
</head>

<body>
<ul>
  <li><a href="1.html" class="saw">프로필</a></li>
  <li><a href="2.html" class="saw active">프로젝트</a></li>
  <li><a href="3.html">Contact</a></li>
</ul>

1. class 속성에는 여러 값이 들어올 수 있고 띄어쓰기로 구분한다.

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

but 2개의 클래스의 영향을 받고 있기 때문에 좋은 방법이 아님.

순서에 따라 결과값이 달라짐.

보다 가까이에 있는 명령이 더 큰 영향력을 갖는다.

ID 선택자

2개의 클래스를 두기보다는, 좀 더 우선순위가 높은 것을 사용하기.

즉, ID 선택자 사용하기

ID값은 단 한번만 등장해야 하는 유일무의한 값. 중복되어서는 안 된다.

<style>

#active{
  color:red;
}
.saw {
  color:gray;
}
</style>
</head>

<body>
<ul>
  <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">Contact</a></li>
</ul>

ID 선택자를 활용하면 순서와 상관없이 우위를 갖는다.

1. 우선순위 : ID 선택자(구체적) > CLASS 선택자 > Tag 선택자 (포괄적)

2. 같은 선택자라면 가장 마지막에 쓰이는 선택자가 가장 우위를 점한다.

3. 포괄적인 태그 선택자를 통해 전체적인 태그의 디자인을 하고,

ID 선택자를 통해 예외적인 부분을 찝어서 체크한다.

박스모델 (Box Model)

<h1> (제목태그) : 화면 전체를 쓰는 것이 기본적으로 편리.

<a>(링크태그) : 앞 뒤가 줄바꿈이 되면 불편하기 때문에 딱 자신의 컨텐츠 크기만큼만 활용한다.

각 태그에 테두리를 그리면 부피를 알 수 있다.

    <style>
      /*
      block level element(=tag)
      */
      h1{
        border-width:5px;
        border-color:red;
        border-style:solid;
        display:inline;
      }

      /*
      inline element
      */
      a{
        border-width:5px;
        border-color:red;
        border-style:solid;
        display:block;
      }
    </style>

display:block;

display:inline;

선언을 해주면 inline과 block 속성이 바뀌게 된다.

display 속성의 기본값일 뿐 CSS를 통해 언제든지 바꿀 수 있다.

display:none;으로 아예 안 보이게 만들 수 있다.

  <style>
      h1,a {
      border:5px solid red;
      }
    </style>

,를 통해. border를 property로 선언함을 통해 중복 제거.

안쪽 여백 간격 주는 declaration => padding:20px;

바깥쪽 여백 간격 주는 => margin

width를 주면 display가 block인 태그이더라도 폭이 자연스럽게 줄어들게 된다.

    <style>
      h1{
      border:5px solid darkgreen;
      padding:20px;
      margin:20px;
      width:500px;
      }
    </style>

개발자도구. 오른쪽 마우스 > 검사

그리드 (Grid)

디자인을 위해서는 어떠한 의미도 존재하지 않는 태그를 사용해야 될 때가 있다.

그럴 때 사용하는 무색 무취의 태그

<div>(division) - block level element

<span> - inline element

    <style>
      #grid{
        border: 5px solid pink;
        display:grid;
        grid-template-columns:150px 1fr;
      }
      div{
        border:5px solid gray;
      }
    </style>
  </head>

div를 한줄로 쓰기 위해서는 부모 태그인 div를 또 하나 만들어주고, 해당 div에 id를 걸어서

display:grid를 선언해준다.

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

이 기술이 얼마나 쓰이고 있는지 대중성을 확인할 수 있는 웹사이트.

row : 행 / column : 열

  #grid{
display:grid;
grid-template-columns: 150px 1fr;
  }

grid-template-columns (하나의 컬럼으로 두고 선택한 비율 및 px에 따라 배치해주는 것)

fr : 화면 전체를 쓰게 자동으로 조절되는 단위.

fr이 들어 있으면 화면을 꽉 채우도록 구성된다.

페이지 검사를 통해 padding을 화살표로 움직여보면서 디자인적으로 고민해볼 수 있는 기능이 있다.

#grid ul{
    border-right: 1px solid gray;
    width:100px;
    margin:0;
    padding:20px;
    padding-left: 50px;

  }
  #grid #article{
  padding-left: 45px;
  }

모든 ul 중에 조상이 #grid인 ul 태그를 찾아오게 된다.

'오늘은 공부 중 > 강의 공부' 카테고리의 다른 글

[생활코딩] WEB2. CSS 반응형 디자인, 미디어 쿼리 (0)	2021.06.21
[생활코딩] WEB1 마무리 + 코드의 힘 + 웹사이트 파비콘 추가하기 (0)	2021.06.12
[생활코딩] web. 웹서버 운영하기 (0)	2021.06.08
[생활코딩] 서버와 클라이언트, 웹호스팅 (0)	2021.06.03
[생활코딩] 웹. 태그와 속성 (0)	2021.06.02

현재글[생활코딩] WEB2 CSS. 선택자와 속성

오늘의 언어