2020-8-27 CSS 기초

CSS

  • CSS란, Cascading Style Sheet의 약자, cascading은 연속적인 흐름을 의미.

  • 기본적으로 브라우저가 HTML파일을 로드할때, 스타일링이 있나 없나 물어본다. Style Sheet에 정의된 내용이 있으면 적용하고, 없으면 브라우저 기본 스타일을 적용한다.

  • Cascading : 스타일링은 Author Style(우리가 정의), User Style(사용자가 지정), Browser(브라우저 기본)로 나눌 수 있다.

    • Author Style => User Style => Browser순으로 스타일이 적용된다.
    • important 키워드를 사용하면 우선순위가 무시. 되도록 사용하지 말자.

Selector

  • Selector란 HTML 태그들중에서 어떤 태그들을 고를지 결정하는 문법이다.
    • Universal : *
    • type : tag ex) div {…}하면 모든 div태그를 선택한다.
    • id : #id
    • class : .class
    • status :
    • attribute : []
// 사용법
selector {
  property: value;
}

// universal selector. 모든 태그들에 적용
* {
  color: green;
}

// type selector
li {
  color: blue;
}

// id selecor
#special { // id=special인 태그에 pink적용
  color: pink;
}

li #special { // li태그중에 id가 special인 것만 적용
  color: pink;
}

// class selector
.box {
  width: 200px;
  height: 200px;
}

// status selector
button:hover {
  color: red;
}
// attribute selector
a[href] { // a태그중에 href를 가지고 있는 태그들만 선택
  color: purple
}
  • css는 페이지 위에서 어떤 요소들을 선택할지 결정하는 selector와 어떤 속성을 결정하는 property, 그 값을 결정하는 values로 이루어져있다.
  • universal selector에서 색상을 설정하고, li에서도 색상을 정의했다. li에서는 color: blue가 적용되는데, 태그에 최대한 가까운 selector가 적용되기 때문이다.
  • button:hover과 같이 tag의 속성에 대해서도 선택할 수 있다.

Box Model

  • padding : 컨텐츠 안에 들어가는 공간
    • padding-top, padding-right와 같이 각각 4방향에 지정도 가능.
    • padding: 20px 30px 20px 20px;와 같이 top right bottom left 시계방향으로 값을 설정할수도 있다.
    • padding: 20px 0px; 위아래 좌우 함께 설정도 가능
  • margin : 컨텐츠 밖에 들어가는 공간
  • border도 border-width, border-style, border-color로 분리할 수 있지만, border : 2px dashed red;처럼 width-style-color순으로 적용할 수 있다.
  • 가능한 속성들은 CSS Reference를 참조하자. 더보기

Layout

**Inline : 컨텐츠 자체만을 꾸며준다. **

**block : 상자, 한줄에 하나

Inline-block : 상자인데, 한줄에 여러개가 가능

  • div : Block Level,
    • block level이기때문에 한줄에 1개가 나온다.
    • display : inline-block으로 바꾸면 한줄에 여러개가 표시
    • 안에 내용을 넣고 display inline으로 하면 한줄에 여러개가 표시
  • span : Inline Level, 안에 내용이 있어야 보인다.
    • Inline레벨이라 한줄에 여러개가 나온다.
    • display: inline => block으로 바꾸면 div처럼 한줄에 1개로 변경.

Position

  • CSS는 기본적으로 static이 default position.
    • static은 HTML에 정의된 순서대로 브라우저에 보여지는것을 의미
  • 컨테이너의 위치를 변경하기 위해서는 position을 relative로 바꾼다. 기존 static의 경우 원래 있어야되는 자리가 고정적으로 있는데, relative로 변경하면 상대적인 위치로 변경
  • absolute : 내 아이템이 담겨져 있는 박스안에서 위치변경이 된다. 나를 담고 있는 컨테이너의 위치에서 이동.
  • fixed : 상자가 아닌 window(웹페이지)안에서 움직여서 위치가 정해진다.
  • sticky : 원래 있는 자리에 있지만, 스크롤링이 되어도 원래있는 위치에 존재하게 된다.

Flex Box

  • float은 이미지와 텍스트를 어떻게 나타낼지 정의하기 위해 등장. flexbox의 등장으로 float은 텍스트, 이미지를 배치하는데 집중.
    • float:left, center, right이 존재.
  • flexbox는 container에 적용되는 속성과 box안에 적용되는 속성이 각각 존재한다.
    • container에 적용 가능한 속성들 : display, flex-direction, flex-wrap, flex-flow, justify-content, alight-items, align-content…
    • item에 지정되는 속성 : order, flex-grow, flex-shrink, flex, align-self…
  • flexbox는 main axis(중심축), cross axis(반대축)이 존재. 아이템들이 어떤 방향으로 정렬되느냐에 따라 main axis가 결정

Container속성

  • flex를 사용하기 위해서는 container에 display:flex로 flex라는것을 명시

    • .container {
  display: flex;
  flex-direction: row; default : row;
  flex-warap : nowrap;
  flex-flow : row wrap;
}

    • flex-direction : flex방향. 기본값은 row. row-reverse, column, column-reverse로 설정할 수 있다.

    • flex-wrap : 기본값 nowrap. 아이템들이 많아져도 아이템들이 한줄에 빼곡히 있다. wrap으로 설정하면 아이템이 한줄에 꽉 찼을경우, 자동으로 줄바꿈을 한다. wrap-reverse옵션도 존재.

    • flex-flow : wrap과 direction을 한번에 할 수 있다. direction wrap으로 하면된다.

    • justify-content: 중심축(main axis)에서 item들을 어떻게 배치할지 결정. 기본값은 flex-start(왼쪽에서 오른쪽으로),

      • flex-end(아이템 순서는 유지하되 오른쪽으로 붙는다). 메인축이 column이냐 row냐에 따라 다르지만 축시작에서 가까이 있느냐 축끝에서 붙어있느냐의 차이정도로 이해하면 된다.
      • center : 가운데로 정렬
      • space-around : box 주변에 공간을 넣어준다. around의 경우 첫번째 마지막박스에서 공간이 약간 좁지만 space-even으로 하면 모든 간격이 동일해진다.

    • align-items : 반대축(cross axis)에서 아이템들을 어떻게 배치할지. baseline : text에 맞춰서 균등하게 맞춘다.

    • align-content : 반대축의 아이템을 지정한다. cross axis 축을 기반으로 배치.

  • flexbox에 대한 참조

Item 속성들

  • .item {
  flex-grow: 0; default is 0
  flex-shrink: 0; default is 0
  flex-basis: auto; default is auto
  order: number;
}

  • order 순서에 맞춰서 사용할 수는 있지만 안쓴다.

  • flex-grow: 기본값은 0. 0인 경우 페이지가 커질경우 아이템의 크기는 그대로이다. 1에 가까울수록 화면을 많이 채우지만 item의 flow-grow를 1로하면 같은 비율로 화면을 표시하게 된다. container가 작아질때는 효과가 나타나지 않는다. 이때는 flow-shrink를 사용한다.

    • .item1 {
	flex-grow: 2;
}
.item2 {
	flex-grow: 1;
}
.item3 {
	flex-grow: 1;
}
    • flex-grow를 2:1:1비율로 설정하면 페이지가 커질때 50% 25% 25%씩 비율을 차지하게 된다.

  • flex-shrink : container가 작아질때 비율설정. 기본값 0

    • .item1 {
	flex-shrink: 2;
}
.item2 {
	flex-shrink: 1;
}
.item3 {
	flex-shrink: 1;
}
    • container가 줄어들때 item1이 2배로 더 빨리 작아진다.

  • flex-basis : container의 크기에 따라 비율을 차지한다. %로 표시한다.

  • align-self: item별로 item을 정렬할 수 있다. 반면 conatiner에 있는 algn-items의 경우 아이템 전체를 어떻게 배치할지 결정.

크기

  • 크기를 표현할때 절대적인 값들(px, pt, cm, m)과 상대적인 값들이 있다.

    • 웹에서는 절대적인 값들은 px을 쓴다. 픽셀은 모니터 위에서 화면에 나타내는 가장 작은 단위를 의미
    • 픽셀의 사용하면 컨테이너의 사이즈가 변경될때도 컨텐츠가 고정된 값으로 유지되는 것을 볼 수 있다.
    • 80px보다는 80%와 같이 부모의 몇퍼센트를 표기할지 많이 쓴다.

  • 상대적인 크기 => em, rem, vw, vh를 가장 많이쓴다.

  • em : 현재 폰트사이즈를 나타낸다. 선택된 폰트 패밀리에 상관없이, 고정된 폰트사이즈를 가지고 있다.

    • 현재 폰트가 16px이면 1em == 16px이 되는거다. 브라우저에서 HTML에 할당되는 폰트사이즈가 16px
    • 부모자식의 관계에서. 부모의 폰트는 8em, 자식의 em은 0.5em. 부모는 128px로 표기가 된다. 자식은 부모의 0.5em인 64px가 된다.
    • em과 %는 비슷하다. 8em이 800%과 동일
    • 정리 : em은 부모의 폰트 사이즈를 곱한값

  • rem : em에 r이 더해진걸로 root를 의미. 부모에 따라 사이즈가 결정되는 것이 아닌 root에 따라 결정된다.

    • parent 8rem이고 child : 0.5rem이면, parent는 16*8=128px가 되고, child는 16*0.5=8px가 된다. root의 기본 사이즈가 16px이기 때문

    • html {
  font-size: 100%;
}
    • 폰트사이즈를 따로 지정하지 않으면 기본적으로 100%로 지정된다. 브라우저가 지정된 폰트사이즈를 따라간다는 의미다. rem, em을 쓰면 브라우저의 크기가 변경되더라도 반응형으로 변경되는 것을 확인할 수 있다.

  • v* : viewport width로서 viewport너비의 몇%를 쓰겠다라고 정의. 100vw는 100%사용. 50vw는 50%사용. vh는 높이에 대해서

  • vmin, vmax : 브라우저의 높이나 너비중에 작은값의 몇퍼센트를 사용하겠다.

느낀점

  • 평소 퍼블리싱에 대한 부담으로 인해 프론트엔드와 퍼블리싱에 대해서 접근을 못하고 있었다. 핑계를 하나 더 되면 디자인에 대한 감각이 없어서 안한것도 있었다. 이번에 프로젝트를 하면서 명확하게 제플린으로 디자인된 웹디가 있어서. 프론트엔드 개발을 위해 CSS공부를 해보았다. Flex모델을 기반으로 잘 해봐야겠다. 부디 퍼블리싱이 잘되길..
Written on August 27, 2020