[코코아톡 클론] 3.11~3.16 필기

yejin·2021년 1월 7일

html css kokoa clon

[코코아톡 클론] html-css

목록 보기

4/9

CSS

Fixed

position : 레이아웃보다 위치를 아주 조금 위로, 오른쪽으로 옮기고 싶을 때 사용

div의 position을 fixed로 만들기

<head>
    <style>
      body {
        height: 1000vh;
        margin: 20px;
      }
      div {
        position: fixed;
        width: 300px;
        height: 300px;
        color: white;
        background-color: teal;
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>

결과
div box가 왼쪽위에 고정돼서 아무리 스크롤을 내려도 여전히 왼쪽위에 고정상태.
body height를 숫자를 높은수치로 작용할수록 스크롤이 늘어남

fixed : box가 계속 그 자리에 위치 ( 자리고정 역할인듯 )

<head>
    <style>
      body {
        height: 1000vh;
        margin: 20px;
      }
      
 <!--div에 fixed제거. 제거 안하면 두번째 div box만 화면에 보여짐-->
      
      div {
        width: 300px;
        height: 300px;
        color: white;
        background-color: teal;
      }
      
  <!--div 하나 더 추가 -->
      
      #different {
        position: fixed;
        background-color: yellowgreen;
        width: 350px;
      }
    </style>
  </head>

  <body>
    <div></div>
    <div id="different"></div>
  </body>

결과

근데 #different에 top, left, right, bottom이라는 프로퍼티 중에서 명령어를 추가하면 더이상 block이든 margin이든 뭐든 신경쓰지 않아. 두 div box가 겹쳐.
이제는 서로 다른 레이어에 있는거야

결과

      #one {
        position: fixed;
        background-color: teal;
<!--opacity는 투명도. 
그냥 두 box가 겹쳐있다는거 눈에띄게 보여줄려고 넣었음-->
        opacity: 0.2;
      }
      #different {
        background-color: yellowgreen;

결과

근데 저거! 어디서 많이 보지않았어?
웹 사이트에 아무리 스크롤 내려서 내용물을 확인해도 위의 메뉴는 고정인거!
그게 저 효과를 쓴거야

Relative Absolute

position: static : 디폴트로 적용되는거 레이아웃이 박스를 처음 위치하는 곳에 두는 것

position: relative : 아주 조금씩만 위치를 옮기고 싶을 때
position: absolute : top, left, right, bottom을 쓰고 싶을 때 사용
body의 맨 오른쪽, 아래, 왼쪽으로 감 부모box 기준이 아니라. body를 기준으로!
absolute는 가장 가까운 relative부모를 기준으로 이동시켜줌
body는 바깥쪽에 있는 가장 relative한 부모

relative 예시

<head>
<style>
      div {
        width: 300px;
        height: 300px;
        background-color: wheat;
      }

      .green {
        background-color: teal;
        height: 100px;
        width: 100px;
        position: relative;
  
	/* 위치 이동시키기 */
        top: -10px;
        left: -10px;
      }
    </style>
  </head>

  <body>
    <div>
      <div class="green"></div>
    </div>
  </body>

결과

absolute예시

top: 0
left: 0

right: 0

absolute가 body를 기준으로 움직이게 하고싶지 않다면 div를 relative로 만들면 돼
=> style속 div에 position: relative 추가. 그럼 속해있는 div를 기준으로 움직임.

<head>
  <style>
      div {
        width: 300px;
        height: 300px;
        background-color: wheat;
        position: relative;
      }

      .green {
        background-color: teal;
        height: 100px;
        width: 100px;
        position: absolute;
        top: 0px;
        left: 0px;
      }
    </style>
  </head>

  <body>
    <div>
      <div class="green"></div>
    </div>
  </body>

결과

Pseudo Selectors part One

pseudo selectros : 처음이나 마지막에 속해있는 class만 바꾸고싶을때 사용 class가 아니더라도..

예시) div색상이 빨간색인데 마지막div만 파란색으로 바꾸고싶어

style속에

      div:last-child {
        background-color: violet;

코드 입력. 그러면 마지막div만 색깔이 바뀜

결과 예시

이렇게 하는게 class나 id를 만드는것보다 훨씬 좋은 방법임

first-child : 첫번째만 변경
last-child : 마지막만 변경
nth-child(값) : 내가 입력한 값만 변경

nth-child(2) : 2번째 부분만 면경
nth-child(even) : 짝수 부분만 변경
nth-child(odd) : 홀수 부분만 변경

nth-child(3n+1) : 3번째마다 변경

4n=1 : 4번째마다 변경

예시

여기서 짝수만 글자 배경을 파란색으로 하고싶을때

      span {
        background-color: violet;
      }
      span:nth-child(even) {
        background-color: blue;
      }

4개씩마다 바뀌게하고싶을때

위 코드에서 even을 4n+1로 변경

Combinators

문제 1) 밑 코딩에서 span중에 <p>안에있는 span만 색을 바꾸고싶으면 어떻게 해야할까?

  <body>
    <span>hello</span>
    <p>
      알바 진짜 너무 힘들었어 이정도면 난 알바가 아니라 점장이라고 
      아니 알바생한테 주방 통제권을 주면 어떻게하나요 
      전 너무 힘이드네요 사장님... <span>이럴거면 시급 더줘!!</span>
    </p>
  </body>

답)

      span {
        color: violet;
      }
      p span {
        color: tomato;

어떤 부모 그룹 안에 자식 그룹 하나만 변경하고 싶을때 사용하는거야.

아까 배운거 응용해서 이렇게 해도 되긴 해

      span {
        color: violet;
      }
      span:last-child {
        color: tomato;
      }

하지만 우리는 지금 한 부모그룹안에 자식그룹중 하나만 바꿀때 쓰는 코딩을 배우는거니까 ~_~

문제 2) 밑과 같은 경우에 p에 속해있는 span (이럴거면 시급 더줘!!) 부분에는 밑줄 안치고싶고 hello에만 밑줄을 치고싶어. 어떻게 해야할까?

      span {
        background-color: cadetblue;
        padding: 5px;
        border-radius: 10px;
      }
      p span {
        color: white;
      }
    </style>
  </head>

  <body>
    <div>
      <span>hello</span>
      <p>
        알바 진짜 너무 힘들었어 이정도면 난 알바가 아니라 점장이라고 아니
        알바생한테 주방 통제권을 주면 어떻게하나요 전 너무 힘이드네요 사장님...
        <span>이럴거면 시급 더줘!!</span>
      </p>
    </div>
  </body>

답)

안좋은 코드

      span {
        background-color: cadetblue;
        padding: 5px;
        border-radius: 10px;
<!--추가코딩-->
        text-decoration: underline;
      }
      p span {
        color: white;
<!--추가코딩-->
        text-decoration: none;
      }

좋은코드

div의 바로 밑 자식에서 span을 찾아 text-decoration: underline을 주는 방법

      span {
        background-color: cadetblue;
        padding: 5px;
        border-radius: 10px;
      }
      p span {
        color: white;
        text-decoration: none;
      }
<!--span은 div바로 밑 자식이어야함. div > span은 p안에있는 span을 가리키지않아-->
      div > span {
        text-decoration: underline;
      }

추가)

    <div>
      <p>
        알바 진짜 너무 힘들었어 이정도면 난 알바가 아니라 점장이라고 아니
        알바생한테 주방 통제권을 주면 어떻게하나요 전 너무 힘이드네요 사장님...
        <span>이럴거면 시급 더줘!!</span>
      </p>
      <span>hello</span>
    </div>

이렇게 span위치를 바꿔도 똑같이 적용됨. div>p>span과 div>span의 차이 보이니

그럼 저 상태일때 p안에 속해있는 자식 span말고 p의 형제인 span에 밑줄 효과를 준다고 해보자.
p다음으로 오는 span에 밑줄효과 주려는거야 p안에있는 span이 아니라

      p + span {
        text-decoration: underline;
      }

> : 바로 밑 자식을 찾기
+ : 밑 형제를 찾기

p + span 결과

얘도 마찬가지로 hello에만 밑줄~

주의할것
span이 p바로밑에 와야해
만약 처음 예시처럼 <span>hello</span>이 알바 진짜~~보다 윗줄에 온다면 p + span코드 효과가 먹히지 않음. 바로 밑이여야해!!!

Pseudo Selectors part Two

이번에 알아볼것은 pseudo selector

위에서 span이 p의 형제인데 바로 뒤에 오지 않을때 + 는 안먹힌다했지?
그럴때 쓸 수 있는게 바로 ~ 야.

: 부모, 바로 밑 자식의 관계
+ : 형제와 바로 뒤에 오는 형제의 관계
~ : 형제와 형제 관계 (꼭 바로 뒤에 올 필요는 없어)

required와 optional

<head>
  <style>
      input {
        border: 1px solid burlywood;
      }

      input:required {
        border-color: tomato;
      }
    </style>
  </head>

  <body>
    <div>
      <form>
        <input type="text" placeholder="username" />
        <input type="password" required placeholder="password" />
      </form>
    </div>
  </body>

결과

attribute selector

attribute를 통해 어떤 것이든 선택할 수 있게 해줌
type이 "password"인 input들이 thistle 배경색을 가지도록 만들거임

위 코드에 이거 추가 하면

      input[type="password"] {
        background-color: thistle;
      }

결과

placeholder에 "name"이라는 단어를 포함한 모든 input이 배경색으로 pink를 가지게 만들어볼거야

<head>
  <style>
      input[placeholder~="name"] {
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div>
      <form>
        <input type="text" placeholder="firs tname" />
        <input type="text" placeholder="last name" />
        <input type="password" required placeholder="password" />
      </form>
    </div>
  </body>