본문 바로가기
programming study/Clone coding

[노마드코더]코코아톡 클론코딩 (3)(2021.1.5)

greedysiru 2021. 1. 5. 20:39

본 내용은 해당 강의 토대로 작성

Learning CSS

1. Flexbox

  • inline block은 기기마다 출력되는 화면이 다르며, 최적값을 찾기 힘든 단점이 있다.
  • Flexbox는 반응형 디자인을 지원하기 때문에 inline block의 문제점을 해결할 수 있다.
  • 사용 예시
<head>
<style>
    body{
        height: 100vh;
        margin: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
</head>
<body>
        <div></div>
        <div></div>
        <div></div>
</body>
  • Flexbox 사용은 아래와 같은 규칙이 있다.
    1. 부모 엘리먼트를 felx container로 만들어야 한다.
    • 이 경우에서는 div가 자식 엘리먼트이다.
    • body가 부모 엘리먼트이므로 이곳에 felx를 적용한다.
    1. justify-content : main axis의 설정(가로,기본값)
    2. aling-items : cross axis의 설정(세로,기본값)
    3. body가 height가 기본값이면, align-items를 사용해도 그대로인 것처럼 보인다.
  • vh : viewport height. 기기에 따라 달라지는 단위. 지금 화면의 %.
  • 자식 엘리먼트가 컨텐츠를 포함한 경우, Flexbox로 설정할 수 있다.

Flexbox의 속성

  • main axis와 corss axis의 기본 값을 flex-direction을 통해 바꿀 수 있다.
  • 사용 예시
<head>
<style>
    body{
        display: flex;
        justify-content: space-between;
        flex-direction: column-reverse;
        flex-wrap: wrap-reverse;
        align-items: center;
    }
</style>
</head>
<body>
        <div></div>
        <div></div>
        <div></div>
</body>
  • flex-direction의 디폴트는 row이다.
    • column을 주면, main axis와 cross axis가 바뀐다.
    • reverse는 순서를 반대로 한다.
  • flex-wrap
    • wrap 이면, 한 줄에 컨텐츠가 나올 수 있는 만큼 보여주고 나머지는 다음줄로 넘긴다.
    • no wrap이면, 한 줄에 모든 컨텐츠를 보여준다. (크기를 줄여서라도)
    • reverse는 wrapping을 할 때, 순서를 반대로 한다.

2. Position

  • Position은 컨텐츠의 위치를 설정할 수 있다.
  • absolute, relative, fixed, static(defalut)가 있다.

fixed

  • 특정 컨텐츠를 화면에 고정된 상태로 할 수 있다.
  • 사용 예시
<head>
<style>
      #different {
        top: 5px;
        left: 200px;
        position: fixed;
        background-color: wheat;
        width: 350px;
      }
</style>
</head>
<body>
    <div></div>
    <div id="different"></div>
</body>
  • id=different인 div는 position: fixed 속성이 주어져서 스크롤이 되어도 항상 제자리에 머무른다.
  • top, left, right, bottom 중에 하나가 값이 입력 되면, 해당하는 요소는 다른 레이어에 위치하게 된다.

kokoatalk3-1

  • 별도의 레이어에 위치하게 되어서 위처럼 화면이 출력된다.

relative, absolute

relative

  • element가 처음 만들어진 위치를 기준으로 top, bottom, left, right를 px단위로 설정할 수 있다.

absolute

  • 가장 가까운 relative를 기준으로 설정된다.
    • 기본값은 body를 기준으로한다.
    • body안에 있는 박스중 relative가 있다면, 그 박스를 기준으로 위치를 결정한다.
  • 사용 예시
<style>
        div {
        width: 300px;
        height: 300px;
        background-color: wheat;
        color: white;
        position: relative;
    }
    .green{
        background-color: teal;
        height: 100px;
        width: 100px;
        position: absolute;
        top: -10px;
        left: -10px;
    }
</style>
</head>
<body>
    <div>
        <div class="green">

        </div>
    </div>
</body>
</html>
  • class = "green"은 position: absolute이다.
    • div가 relative이므로 이것을 기준으로 위치하게 된다.

3. Pseudo Selectors

  • id나 class를 사용하지 않고 특정 요소만 지정해서 설정할 수 있다.
  • 세부적으로 지정할 수 있다.
  • 사용 예시
<head>    
<style>
        div:first-child{
        background-color: tomato;
    }
    div:last-child{
        background-color: teal;
    }
</style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
  • 선택자 뒤의 first-child와 last-child를 지정해서, div의 첫 번째와 마지막만 속성을 적용할 수 있다.

n번째 태그 수정하기

<head>
<style> 
        span:nth-child(2){
        background-color: teal;
    }
        span:nth-child(even){
        background-color: tomato;
    }
        span:nth-child(odd){
        background-color: whitesmoke;
    }
        span:nth-child(5n + 1){
        background-color: teal;
    }
</style>
</head>
<body>
    <span>hi</span>
    <span>hi</span>
    <span>hi</span>
    <span>hi</span>
    <span>hi</span>
    <span>hi</span>
    <span>hi</span>
</body>
  • nth-child(n) : n번 째 태그를 가르킬 수 있다.
    • even, odd : 짝수, 홀수를 가르킬 수 있다.
    • 5n+1 : 1, 6, 11, 16… 번 째 태그를 가르킬 수 있다.

more pseudo selctors

<head>
<style>
        input {
        border:1px solid wheat;
    }
    input:required {
        border:1px solid tomato;
    }
    input[type="password"]{
        background-color: thistle;
    }
    input[placeholder~="name"]{
        background-color: pink;
    }
</style>
</head>
<body>
    <div>
        <form>
            <input type="text" placeholder="Frist name"/>
            <input type="text" placeholder="Last name"/>
            <input type="password" required placeholder="password"/>
        </form>
    </div>
</body>
  • input:required : input태그 중에서 required인 요소를 적용
  • input[type="password"] : input태그 중에서 type=password인 요소를 적용
  • input[placeholder~="name"] : input태그 중에서 placeholder에 name이 포함하는 것을 적용

pseudo element

  • ::placeholder
    • placeholder를 설정할 수 있다.
  • ::selection
    • 드래그했을 때 효과를 설정
  • ::firstletter
    • 첫 문자만 꾸미기
  • ::first line
    • 첫 줄만 꾸미기

4. Combinators

  • 부모, 자식 elements 관계를 이용해서 스타일을 적용할 수 있다.
  • 사용 예시
<head>
<style>
    span {
        background-color: yellowgreen;
        padding:5px;
        border-radius: 10px;
    }
    p span{
        color:white;
    }
    div > span{
        text-decoration: underline;
    }
    p + span{
        text-decoration: underline;
    }
</style>
</head>
<body>
    <div>
        <span>hello</span>
        <p>
        hello, I'm greedysiru! <span>jaemin</span>
        </p>
        <span>GOOD</span>
    </div>

</body>
  • p span : p태그(부모) 하위의 모든 span태그(자식)에 스타일을 적용한다.
  • div > span : div태그(부모) 바로 하위(자식)의 span태그에만 스타일을 적용한다.
  • p + span : p태그 다음 순서(형제)의 span에 스타일을 적용한다.
    • P ~ span : 형제인데, 바로 뒤에 오지 않을 때

5. States

  • 요소가 특정 조건으로 활성화 되었을 때, 효과를 줄 수 있다.
  • active : 해당 요소를 마우스로 클릭했을 때 효과 적용
  • hover : 마우스가 해당 요소 위를 지나갈 때 효과 적용
  • focus : 키보드로 선택되었을 때 효과 적용
  • focus-within : 부모 요소에게 적용. 하위 요소가 선택되었을 때, 효과를 적용
  • visited : 방문한 사이트일 경우에 효과 적용
  • 여러 조건 하에서 효과를 적용시킬 수도 있다.
    • 사용 예시
<style>
<head>
    form:hover input:focus{
        background-color: violet;
    }
</style>
</head>
<body>
    <form>
        <input type="text">
        <input type="text">
        <input type="text">
    </form>   
</body>
  • form : hover input : focus : form에 마우스가 올려져 있고 input이 focused되었을 때, 효과 적용한다.

6. Colors and Variables

Colors

CSS에서 사용하는 색 체계는 아래와 같다.

  1. hexadecimal color (16진수 컬러)
    • #000000 방식으로 표현
  2. RGB 방식
    • 디자이너들이 많이 사용하는 방법
    • RGB(0,0,0) 방식으로 표현
    • Red, Green, Blue의 삼원색을 사용
  3. RGBA 방식
    • RGB에 투명도를 더한 방식

Variable (custom properties)

  • 프로그래밍 언어처럼 변수에 지정하고 싶은 색상 코드나 설정을 선언할 수 있다.
  • 사용 예시
<head>
<style>
    :root {
        --main-color: #fcce00;
        --default-border: 1px solid var(--main-color);
    }
    p {
        background-color: var(--main-color);
    }
    a {
        color: var(--main-color);
        border: var(--default-border);
    }
</style>
</head>
<body>
    <p>
        가나다
    </p>
    <a href="http://www.naver.com">go to naver</a>
</body>
  • :root라는 element에 변수를 추가한다.
    • 변수명은 --을 먼저 써야 한다.
    • 공백은 -으로 채운다.
  • 변수 사용은 var를 붙인다.

느낀점

드디어 CSS기초가 다 끝났다. 이어서 심화 CSS로…

다양한 선택자를 알 수 있었고 변수 선언도 할 수 있는 것은 신기했다 ! 빨리 클론 코딩을 해보고 싶다…


'programming study > Clone coding' 카테고리의 다른 글

[노마드코더]코코아톡 클론코딩 (6)(2021.1.7 ~ 8)  (0) 2021.01.08
[노마드코더]코코아톡 클론코딩 (5)(2021.1.7)  (0) 2021.01.07
[노마드코더]코코아톡 클론코딩 (4)(2021.1.6)  (0) 2021.01.06
[노마드코더]코코아톡 클론코딩 (2)(2021.1.4)  (0) 2021.01.04
[노마드코더]코코아톡 클론코딩 (1)(2021.1.1 ~ 2)  (1) 2021.01.02

'programming study/Clone coding' Related Articles

티스토리툴바