코코아톡 #3

타키탸키·2021년 3월 31일
html노마드 코더웹사이트코코아톡클론 코딩
0

코코아톡 클론 코딩

목록 보기
3/3

3.0 [21.04.01]

  • HTML과 CSS 섞는 방법
    • 같은 HTML 파일에 HTML 코드와 CSS 코드 놓기
    • or 분리하기
  • <style>
    • 반드시 head 안에 넣어주기
    • CSS 코드 작성
  • CSS 파일 만들기
    • <link href="style.css"> rel="stylesheet" />
    • style.css: 스타일 시트
    • 이 방법이 더 좋다! 더 많은 HTML 페이지에 활용 가능하기 때문이다.

3.1

  • CSS가 하는 일은 HTML 태그를 가리키는 일
    • 가리키다 = selector
  • selector
    • 여러 속성(폰트, 크기, 색...)을 가진다
    • 속성 묶음: {}
    • selectorName {속성}
    • selector 이름 = tag 이름
    • h1 { }
    • 문법: 속성의 이름: 값;
    • 세미콜론(;) 빠뜨리지 말기
    • 공백에 언더바(_)나 슬래쉬(/)쓰지 않는다
  h1 {
    color: blue;
    font-size: 20px;
    font-weight: 800;
    font-style: italic;
    text-decoration: underline;
    text-align: center;
    }

3.2

  • cascades: 작은 폭포 > 순차적으로 내려온다
  • CSS 파일 동작 확인하기
    • css 파일에 다음 코드 적어준다
 body {
   background-color: red;
 }
  • external CSS
    • CSS 파일을 include 한다
    • <link> 부분
  • inline CSS
    • CSS 코드 부분
  • 두 코드가 같은 selector를 가지면?
    • 맨 마지막에 있는 코드가 가장 마지막에 적용된다
    • external과 inline 부분의 자리를 바꾸면 뒤에 있는 코드 기준으로 바뀐다

3.3

div {
  height: 150px;
  width: 150px;
  background-color: tomato;
}
  • body 부분에 div를 가진 모든 코드들에 적용된다
  • block
    • 옆에 다른 요소가 올 수 없는 요소
    • box(div, header,...), paragraph, address, code...
  • inline
    • in the same line
    • 옆에 다른 요소가 올 수 있는 요소
    • link, image, span,...

3.4 [21.04.02]

  • display 속성
    • inline을 block으로, block을 inline으로 변경한다
span{
  display: block;
  }
div{
  display: inline;
}
  • 만약 div가 height이나 width 같은 속성을 가지고 있다면 inline으로 바꿨을 때 그냥 사라져 버린다
    • inline은 height나 width 같은 속성을 가지지 않기 때문이다
    • inline은 박스가 아니다
  • 박스의 세 가지 특징
    • margine
    • padding
    • border
  • 브라우저가 자동으로 적용하는 사항이 있다
    • 여백
    • <title> 글씨 굵게 표현 / 박스로 설정
body    user agent stylesheet
{
  display: block;
  margin: 8px;
}
  • margin
    • 박스 border(경계)의 바깥에 있는 공간
    • default 값
    • margin을 0으로 설정하면 default 값(여백)이 사라진다
    • margin-left / right / top / bottom

3.5

  • 방향 없이 margin 설정하면 모든 방향에 동일하게 적용된다
  • margin에 두 값을 주면 전자는 위아래, 후자는 좌우로 적용된다
  • 값을 네 개 주면 시계 방향 순으로 적용된다(상,우,하,좌)
  • Collapsing margins
    • div의 margin에 값을 적용하면 body도 함께 변한다
    • 수직에서만 일어나는 현상
    • div의 경계와 body의 경계가 만나면 두 margin은 하나로 취급된다
    • 둘 중 큰 값의 margin이 적용된다

3.6

  • padding
    • box의 경계 안쪽에 있는 공간
  • 여러 개의 div id로 구분 가능
  • #id이름: id selector 지정 방법
#first {}
  • CSS의 id명은 HTML의 id명과 같아야 한다

3.7

  • border
    • 박스의 경계
    • 문법: 너비, 스타일, 색깔
border: 2px solid black;
  • border style MDN
    • border 스타일 옵션을 볼 수 있는 사이트
  • *: 모든 selector 통칭
    • inline에도 border 적용 가능하다
  • cascading을 잘 활용하면 코드를 다시 쓸 필요 없이 적용하고 싶은 기능을 마지막에 적으면 된다

3.8 [21.04.06]

  • inline은 위아래 margin을 가질 수 없다
    • 높이와 너비가 없기 때문이다
    • padding은 사방에 다 가질 수 있다
    • margin을 위아래로 적용하고 싶으면 block으로 바꿔야 한다
  • selector 그룹핑
#tomato,
#tomato2,
#tomato3 {
  background-color: tomato;
}

<body>
  <span id="tomato">hello</span>
  <span>hello</span>
  <span id="tomato2">hello</span>
  <span>hello</span>
  <span id="tomato3">hello</span>
 </body>
  • class
    • 반복되는 코드 방지
    • class는 여러번 사용 가능(id와 다름), 요소도 여러 개 가능
    • 온점(.): class명
    • #: id명
  • border-radius: 코너를 둥글게 만들어준다
.btn {
  padding: 5px 10px;
  border-radius: 5px;
}
.tomato {
  background-color: tomato;
  color: white;
}
.teal {
  background-color: teal;
}
<body>
  <span class="btn tomato">hello</span>
  <span class="btn teal">hello</span>
  <span class="btn tomato">hello</span>
  <span class="btn teal">hello</span>
  <span class="btn tomato">hello</span>
 </body>
  • ctrl + d: 코드 한 번에 선택하기

3.9

  • inline-block
    • display를 통해 div(block)를 inline으로 바꿀 수 있다
    • 그러나, 높이랑 너비를 적용할 수 없다
    • 따라서, inline-block으로 적용한다(display: inline-block)
    • 그럼 block으로 인식한다
    • 얻을 수 있는 효과는 inline처럼 요소를 옆에 나열할 수 있고 block처럼 높이와 너비를 가질 수 있다는 것이다
  • inline-block 단점
    • 설정하지 않은 여백이 생긴다
    • 정해진 형식이 없다
    • 반응형 디자인을 지원하지 않는다

3.10

  • flexbox
    • 박스들을 어떤 곳이든 둘 수 있다
  • flexbox 규칙
    • 첫번째: 자식 엘리먼트에는 어떤 것도 적지 말아야 한다
    • ex:) div에다 적지말고 div의 부모인 body에 적어야 한다
    • 부모 엘리먼트를 flex container로 만든다(display: flex)
    • body가 자식을 제어한다
    • 두번째: 주축(수평)과 교차축(수직)
    • flexbox에서 가지는 기본축
  • justify-content(주축)
    • 요소 위치 정렬
    • flex-start /center / flex-end
    • space evenly: 균등한 여백
  • align-itmes(교차축)
    • height에 적용
    • body에 height가 없다면 aligh-items를 설정해도 바뀌지 않는다
    • 이미 요소가 맨 위아래를 차지하고 중심에 있기 때문이다
  • vh: viewport(screen) height
    • 화면 크기에 따라 바뀐다
    • 다양한 환경에 이식 가능

3.11 [21.04.07]

  • flex-direction
    • display: flex > 디폴트: row(수평)
  • flex-direction: column
    • 주축과 교차축의 디폴트를 바꾼다
    • 주축(수직) + 교차축(수평)
    • align-items(수직): 수평 적용
    • justify-content(수평): 수직 적용
  • div 안에 숫자를 주면 숫자가 자식 엘리먼트가 된다
    • div가 flex container가 된다
    • div에 적는 코드들이 숫자에 적용된다
  • 부모의 부모가 flex container여도 자식에는 영향을 미치지 못한다
    • 숫자에 대해서는 div만 제어 가능하다
  • wrapping
    • 화면이 줄어들 때, 요소들도 같이 줄어드는 것
  • flex-wrap
    • no-wrap일 때, width 값에 상관없이 가로 길이가 줄어든다
    • wrap일 때, width를 유지하고 요소가 이동한다
    • wrap-reverse: wrapping 방향 거꾸로
  • flex-direction
    • 디폴트는 row(수평)
    • column(수직)
    • column-reverse(위에서부터 3 2 1)
    • row-reverse(왼쪽에서부터 3 2 1)

3.12

  • position
    • 레이아웃보다 위치를 조금씩 옮기고 싶을 때 사용한다
    • fixed: 스크롤을 내려도 박스가 계속 같은 자리에 위치한다
    • 넷플릭스의 메뉴바
        <style>
            body{
                height: 1000vh;
                margin: 20px;
            }
            div{
                width: 300px;
                height: 300px;
                color: white;
                background-color: teal;
            }
            #different {
                position: fixed;
                background-color: wheat;
            }
        </style>
       ...
    <body>
        <div></div>
        <div id="different"></div>
    </body>
  • diffent div의 position을 고정하면 스크롤을 내려도 원래 있던 위치(첫번째 div 아래)에 고정되어 있다
  • diffent div에 위치(top, left, ...) 값을 주면 첫번째 div를 무시한다
    • 서로 다른 레이어로 넘어가기 때문이다
  • 첫번째 div를 고정하면 두번째 div를 덮어버린다(다른 레이어)
            #green {
                position: fixed;
                opasity: 0.2;
            }
            #different {
                background-color: wheat;
            }
	...

    <body>
        <div id="green"></div>
        <div id="different"></div>
    </body>
  • opacity: 투명도

3.13

  • position: static;
    • 레이아웃이 박스를 처음 위치하는 곳에 두는 것
    • 디폴트
  • position: relative;
    • 조금씩만 좌우로 옮기고 싶을 때
    • top, bottom, left, right과 함께 쓴다
    • 요소가 처음 위치한 곳을 기준으로 이동한다
<style>
            body{
                height: 1000vh;
                margin: 50px;
            }
            div{
                width: 300px;
                height: 300px;
                background-color: wheat;
            }
            .green {
                position: relative;
                top: -10px;
                left: -10px;
                background-color: teal;
                height: 100px;
                width: 100px;
            }
        </style>
	...
<body>
        <div>
          <div class="green"></div>
        </div>
    </body>
  • position: absolute;
    • 가장 가까운 relative 부모를 기준으로 이동한다
    • div가 가장 가까우나 relative가 아니므로 body가 기준
    • top, bottom, left, right와 함께 쓴다
    • body 기준으로 옮기기 싫다면 div를 relative로 만든다
div{
        width: 300px;
        height: 300px;
        background-color: wheat;
        position: relative;
    }
    .green {
        background-color: teal;
        height: 100px;
        position: absolute;
        width: 100px;
        top: 0px;
        left: 0px;     
    }

3.14

  • selector 세 가지
    • 태그 이름
    • #: id
    • .: class
  • pseudo selectors
    • 좀 더 세부적으로 요소를 선택한다
    • 콜론(:), 공백 없이
    • 클래스나 아이디보다 훨씬 나은 방법
div:first-child {
	background-color: tomato;
}
div:last-child {
	background-color: teal;
}
  • child
    • first-child: 첫번째 div
    • last-child: 마지막 div
    • nth-child: 중간 요소 지정할 때
    • even / odd
    • 2n / 2n+1 / 3n...
span{
	background-color: tomato;
}

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

<body>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
</body>

3.15 [21.04.08]

span{
  color: tomato;
}

...

<div>
   <span>hello</span>
   <p>
     when my heart is beating for you
     come close to me give a kiss to me<span>for you</span>
              </p>
            </div>
  • 위와 같은 상황에서 p 속 span만 색을 바꾸고 싶다면?
    • p span { }
    • 부모 - 자식
  • 위 사례에서 div는 두 자식을 가진다
    • span
    • p
  • 이들 중 span에만 효과를 적용하고 싶다면?
    • div 바로 밑 자식(direct children)이라는 전제 하에 div > span {}
  • text-decoration
    • underline: 밑줄 긋기
  • p와 span의 자리를 바꿔서 p 다음으로 오는 span을 지정하려면?
    • p + span {}
    • 둘은 형제 관계

3.16

  • 바로 아래 형제가 아니라면?
    • p ~ span {}
  • combinator
    • >: 자식
    • +: 바로 아래 형제
    • ~: 먼 형제
  • optional vs. required
    • 속성 따로 적용 가능
<style>
    body{
       height: 1000vh;
       margin: 50px;
      }
   input {
       border: 1px solid wheat;
      }
   input:required {
       border-color: tomato;  
      }
</style>

<div>
   <form>
      <input type="text" placeholder="First name" />
      <input type="text" placeholder="Last name" />
      <input type="password" required placeholder="password" />
   </form>
</div>
  • attribute selector
    • attribute를 통해 어떤 것이든 선택할 수 있게 해준다
input[type="password"] {
  background-color: thistle;
}
  • attribute명 뒤에 ~를 붙이면 뒤 단어를 포함한 모든 속성에 적용
input[placeholder~="name"] {
  background-color: skyblue;
}
  • $: ".org"로 끝나는 모든 anchor 선택

3.17

  • state
    • active: 클릭하고 있을 때
    • hover: 마우스를 올려 놓을 때
    • focus: 키보드로 선택되었을 때
    • visited: 링크에만 적용 / 방문한 사이트 > 색 바뀜
    • focus-within: focused인 자식을 가진 부모 요소 상태 
<style>
   button:hover{
       background-color: tomato;
    }
</style>
<style>
   input:focus {
      background-color: tomato;
   }
</style>
<style>
   a:visited {
       color: tomato;
    }
</style>
...
<a href="https://apple.com">Go to apple</a>
<style>
   form{
      border: 1px solid salmon;
      display: flex;
      flex-direction: column;
      padding: 20px;
  }
  form:focus-within {
     border-color: seagreen;
  }
</style>
...
<form>
   <input type="text" name="" id="">
   <input type="text" name="" id="">
   <input type="text" name="" id="">
</form>
  • 디폴트 스타일을 바꾸면 처음부터 다시 스타일 해야 한다
  • state를 다른 요소와 연계해서 사용할 수 있다
    • 부모-자식 관계에서 가능
    • ex:) form이 hover가 되면 input이 변한다
    • 이중 조건도 가능
    • ex:) form: hover input: focus
form:hover input {
    background-color: sienna;
}

3.18

  • psudo element
    • 실제로 존재하는 요소는 아니지만 스타일링 가능
  • ::placeholder: placeholder를 스타일 할 수 있다
input::placeholder {
  color: slateblue;
}
  • ::selection: 형광펜처럼 텍스트 하이라이팅
<style>
   p::selection {
      background-color: slateblue;
   }
</style>
  • ::first-letter: 첫 글자만 효과 적용
<style>
   p::first-letter {
      font-size: 50px;
   }
</style>
  • ::first-line: 첫 줄만 효과 적용
profile
타키탸키
There's Only One Thing To Do: Learn All We Can
이전 포스트

코코아톡 #2

0개의 댓글