본문 바로가기
카테고리 없음

1.3 CSS-FE

by 질서정연_ 2020. 7. 19.

선택자와 property value (속성의 이름)

span { color : red; }

 

style 을 hyml에 적용하는 방법 세가지.

inline

internal

external

html 태그 안에다가 <inline>

바디 안에 <span style = "color:red";>

같은 스타일 부여하려 했을 때 같은 셀렉터로 동일한 속성값에 다른 벨류를 넣었다면 inline에 적용된게 최우선으로 적용 됨. 인라인으로 적용 된 스타일은 가장 먼저 적용된다(같은 속성을 추가하려 할 때)

 구조와 스타일이 섞여있으면 좋지 않다.

<internal>은 헤드 안에 바로 스타일을 넣을 수 있다. 장:별도의 css파일을 관리하지 않아도 되고 서버에 css파일 부르기 위한 별도의 브라우저 요청 보내지않아도 되는 장점. 

external은 외부 css파일을 만들어서 include시킴. 별도 파일로 분류하는게 좋다.

<!DOCTYPE html>
<html>
<head>
  <style>
    div > p {
      font-size:20px;
      border : 1px solid slategray;
    }
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <p style="color:blue;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim architecto doloremque, error voluptatem in nemo velit harum perferendis modi commodi maiores accusantium ducimus. Sed veritatis eius tempora, perferendis fuga laboriosam!
    </p>
  </div>

</body>
</html>

 

 

생각해보기

  1. javascript로 동적으로 css코드를 수정하려고 하면 어떻게 해야 할까요? 나중에 차츰 알게 되지만, 미리 어떤 방법이 있을지 고민해보세요. 
  2. 구글 웹사이트는 어떻게 css를 선언하고 있을까요? 구글 웹사이트(구글 내 여러가지 웹사이트중 하나)에서 소스보기를 해서 CSS 코드를 한번 찾아보세요. internal 방식이나 external 방식 등을 목격할 수 있을 겁니다.

www.hostinger.com/tutorials/difference-between-inline-external-and-internal-css

 

Three Different Types of CSS Styles: The Complete Guide

This article will explain the three types of CSS along with the advantages and disadvantages of each type.

www.hostinger.com

>세가지 방식에 대한 예제와 설명.

 

상속

css의 설정을 부모와 같게 두고 자식을 생성하자

 

<!DOCTYPE html>
<html>
<head>
  <style>
    div ul li div p {
        color : green;
    }
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>
  <span>my text is upper!</span>
  <ul>
    <li>
      <span>my text is dummy</span>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sunt consequuntur laborum, tempore quod earum fuga nostrum. Eos debitis consectetur distinctio nam quis sapiente facere iusto. Suscipit, ipsam fugiat enim.
        </p>
      </div>
    </li>
    <li></li>
  </ul>
</div>
</body>
</html>

div ul li div p..에만 적용. 그래서 p이후의 것만 초록색이 된다. 

패딩과 보더같은 배치와 관련된 애는 상속을 받지 않는구나 그 외 속성은 상속을 받아 효율적으로 CSS를 만들 수 있다. 

 

<!DOCTYPE html>
<html>
<head>
  <style>
    body > div{
        color : green;
        font-size : 30px;
        border:2px solid slategray;
        padding: 30px;
    }
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>
  <span>my text is upper!</span>
  <ul>
    <li>
      <span>my text is dummy</span>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sunt consequuntur laborum, tempore quod earum fuga nostrum. Eos debitis consectetur distinctio nam quis sapiente facere iusto. Suscipit, ipsam fugiat enim.
        </p>
      </div>
    </li>
    <li></li>
  </ul>
</div>
</body>
</html>

 

그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다.

 

cascading

css는 여러가지 스타일 정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다. 

똑같은 설정을 CSS파일에 정의 해놧거나, 인라인으로 해놧거나 중복일때. 같은 노드를 가르킬 떼

어떤걸 기준으로 스타일 최종 반영? 그 규칙이 있어서 그거에 따라서 개발하면 좋음. 

inline > internal > external

 

inline이 먼저 적용. external 이 나중에 적용.

span{

    color: red;

}

span {

   color:blue;

}

동일하면 뒤에것이 적용 됨.  =>color가 blue가 됨.

 

body>span{

  color:red;

}

span{

  color:blue;

}

여기는 red가 됨. 구체적으로 표현(위에게.) 더 구체적으로 표현된것에 우선해서 적용됨. 

구체적이면 점수를 더 줌 

<div id="a" class="b">

    text..

</div>

-----------------------------

#a{  //아이디값 부르는

    color : red;

}

.b{  //클래스 부르는

   color: blue;

}

div {

   color:green;

}

같은 걸 가르키고 있는데 결과는 red가 나옴. id값에는 더 높은 점수를 준다. 

id>class> element

'css specificity' 찾아보면 더 잘 알 수 있다. 

developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

생각해보기

  1. class는 우선점수가 10점, id는 100점이라고 표현했습니다. 그런데 class 가 11개라면 어떻게 될까요?  id보다 우선순위가 높을까요? 실제로는 그렇지 않습니다.
    이현상은 올림픽순위가 금메달의 갯수를 통해 우선결정되는 것과 비슷한데요.
    id는 금메달, class는 은메달, tag는 동메달로 이해하는게 편합니다. 

css selectior 는 트리구조로 되어있는걸 빠르게 찾아감. 속성과 태그 이름을 통해서 찾아간다.

tag, id, class

span tag 이면 모든 span 에 적용.

id로 지정하기

#spantag 이런식으로. id는 하나만 쓰는게 좋음 유니크 한걸로...

<span id="spantag">

 

class로 지정하기

.spanClass{

color:red

}

<span class="spanClass">

 

id,class 요소 선택자와 함께 활용.

#myid {color:red}

div.myclassname {color:red}

 

그룹선택

h1, span, div {color : red}

h1, span, div#id {color : red}

h1.span, div.classname { color: red}

 

하위요소 선택(공백)

#jisu span {color :red}  //자식의 자식.. 같은거 선택하고 싶을 때

자식 선택(>)

#jisu > span {color: red}

 

n번째 자식요소를 선택

#jisu > p:nth-child(2) {color:red}

 

생각해보기

  1.  pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.

 

<!DOCTYPE html>
<html>
<head>
  <style>

    span#myspan{ /*스펜인데 아이디가 스팬인.*/
      color : red;
    }
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<div>
  <span id="myspan">my text is upper!</span>
  <ul>
    <li>
      <span id="myspan">my text is dummy</span>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sunt consequuntur laborum, tempore quod earum fuga nostrum. Eos debitis consectetur distinctio nam quis sapiente facere iusto. Suscipit, ipsam fugiat enim.
        </p>
      </div>
    </li>
    <li></li>
  </ul>
</div>
</body>
</html>

엘리먼트가 배치되는 방식

배치한다고 함. 위->아래로 순서를 이루며 배치된다. 위에서 아래로 쌓이게 된다. 

CSS는 여러 속성을 지원. 

display(block, inline, inline-block)   //영역을 가지는 기본속성 inline을 기본으로 가진 애도 있음

 :블럭을 가지고있지않아 좌->우로 흐른다.

position(static, absolute, relative, fixed)// 특별한 값을 가지며 배치가 됨

float(left, right)// 쌓이는 순서에서 벗어나 특별하게 배치되는.. 하늘에 떠있는 듯한.느낌으로 배치

<!DOCTYPE html>
<html>
<head>
  <style>
    body>div {
      font-size:32px; /*폰트사이즈값이 자식노드에 상속. */
      background-color: #ff0; 
      font-family: monospace; /*폰트설정*/
    }
    .myspan{
      color : rgba(255,0,0,0.5); /*알파값=투명도 조절. #써서 16진수로도 표현 가능하다.#f00 컬러값 변경하고 싶다면 f12 후 색을 정할 수 있다. */
      font-size: 16px; /*1em ,상대적인 크기로 지정 가능함 =>32*1=>32px.*/
    }
  </style>
</head>

<body>
<div>
    <span class="myspan">my text is upper!</span>
</div>
</body>
</html>

 

대부분 다 디스플레인 블록.

옆으로 흐르는 엘리먼트

좀 다르게 배치시키기(position 속성)

다양한 배치를 원한다 ..!! 기본적인 틀에서 벗어난 특별한 배치. 포지션이용이 좋음.

포지션 속성은 기본값이 있음. static이란 이름 가짐.(기본) absolute(left, top을 꼭 명시하는게 좋음) 기준점에 따라서 특별한 위치에 위치함.

기준점? 상위 엘리먼트 중 static이 아닌 애. 

relative 는 자신이 위치할 곳 기준으로 상대적인 값 부여. fixed는 고정된 레이어로. 광고.. 같은

1하면 주석 됨. CSS에서는. 

relative 는 살짝변경? 

fixed는 바디 기준으로 변경된다. 그 위치 그대로 존재. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="yellow"</div>
  <div class="red"></div>
</body>
</html>
div {
  width:200px;height:200px;
  border:1px solid gray;
  font-size:0.7em;
}

.yellow {
  /*float:left;*/
  background-color:yellow;
  margin-left:210px;
} 

.blue {
  float:left;
  background-color:blue;
}

.green {
  float:left;
  background-color:green;
  margin-top:10px;
  margin-left:210px;
}

.red {
  float:right;
  background-color:red;
  margin-top:10px;
  /*숨겨진 녹색을 드러내기 위해 relative로 살짝 옮김*/
  1position:relative;
  1left:10px;
}


/*그린은 float로 둥둥 떠 있는 모습
그래서 blue,red가 쌓이고 green은 float로
둥둥 떠 있는 모습. */

간격을 다르게해서 배치(margin:10px)

엘리먼트들의 상대적인 배치를 할 수 있다. 

 

블록들이 일반적인 플로우로 흐르면서 쌓이게 됨. 

float 속성은 특별한 위치 배치하지 않고 조절은 가능한데 기존의 배치에서 예외적으로 둥둥 떠 있는.. 

그 성질을 이용해 엘리먼트 배치를.

 

float를 써서 레이아웃.. 좌우배치 할 때 많이 쓴다. 

 

엘리먼트 간에는 마진으로 서로간의 간격을 주고, 

보더는 테두리.. 두께 조절

엘리먼트 안에는 컨텐츠와 엘리먼트가 가진 크기 사이에 패딩을 준다. 엘리먼트의 배치가 그래서 좀 다르게 나온다. 

 

margin 100을 줬다 top right  bottom left.. 식의 순서대로 간격을 100px씩 갖는다. 

padding도 마찬가지로 위 오른쪽 아래 왼쪽 순서대로 간격. 25px..

위 아래 50, 왼쪽 아래 0으로 하고 싶다-> padding: 25px 0px;

위 25 오른 0 아래 10 왼 3 -> padding: 25px 0px 10px 3px;

 

박스모델=>보더, 마진, 패딩

+box-shadow는 border 밖에 테두리를 그릴 수 있는 속성

 

엘리먼트의 크기는 부모의 크기가 기본.

ex)width:100%는 부모의 크기만큼을 다 갖는 것과 같다. 

 

box-sizing과 padding

padding을 변경해도 크기가 유지되기를 원한다면

box-sizing:content-box;로 해주면 된다.

박스의 크기가 최대한 유지된다. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="box-content">
    box-content<br>(100px보다커짐)
  </div>
  
  <div class="box-border">
    box-border<br>(100px유지)
  </div>
</body>
</html>
div{
  width:100px;
  height:100px;
  border:1px solid red;
  padding:10px;
  font-size:0.8em;
}

.box-content {
  box-sizing:content-box;
}
/*content박스는 박스사이징의 기본값
이렇게 쓰면 박스가 패딩에 의해 계속 커질 수 있다.*/

.box-border{
  box-sizing:border-box;
  /*이 박스의 크기를 테두리야 라고 지정해주는..
  박스의 크기를 최대한 유지하려고 한다*/
}

 

layout 구현 방법은?

 

전체 레이아웃은 float를 잘 활용해서 2단, 3안 컬럼 배치를 구현하는게 중요.

css-grid나 flex속성등 layout을 위한 속성을 사용하기 시작. 

엘리먼트안의 텍스트 간격과 다른 엘리먼트간의 간격은 padding과 margin속성을 잘 활용해서 위치시킨다. 

 

생각해보기

  1. 여러분들이 자주 사용하는 웹사이트의 배치를 살펴봅니다.
  2. 크롬 개발자도구의 element 패널을 열어서 소스코드를 살펴봅니다.
  3. CSS의 어떤 속성을 주로 사용해서 좌/우로 배치를 하고 있는지 찾아보면 좋습니다.
  4. 실제로 많은 웹사이트도 float와 같은 전통적 방식을 사용하는 것을 찾아볼 수도 있습니다.

어쩌고.left -> <어쩌고 class="left">

clear:both; css에서 하면, 너 위에있는 float를 인식해서 올라가지마삼. 

즉 자식이 float인 경우에는 또 자기의 자식으로 생각하지 않음. 자식으로 인정해서 높이값으로 생각 X.

overflow속성을 줘서 플로트를 인식하게 할 수 있음. overflow속성을 주면 float인식 할 수 있.

->overflow:auto;

높이값은 자동으로 채워지지않음.

 

element탭.

 

댓글

티스토리툴바