212204 TIL

김풀연·2021년 11월 4일
CSSTIL멋쟁이사자처럼
0

TIL

목록 보기
4/32

3일차 보강 설명

1.

::after, ::before 은 css로 꾸밀 때 많이 사용한다. 버튼을 꾸밀 때 등등

2. 선택자

3. 우선순위 계산

https://specificity.keegan.st/

우선순위 계산 해야한다고 함..중첩이 많이 될수록 계산해야한다고 함. 실무에서도 계산한대

id 100점 class 10점 tag 1점

그런데 class가 11개여도 id 하나가 우선순위가 더 높다.

-> 그러나.. 내가 저번에 들은 바로는 BEM을 많이 사용한다고 들었다. 질문 드렸더니, 실무에서도 그런 모양. 그래도 알고는 있어야 하니까 뭐!

실무에서는 주로 클래스 선택자를 많이 사용합니다. ID 선택자는 중복을 허용하지 않으니 사용하기 힘들고, 요소 선택자는 모든 요소에 영향을 주기 힘드니 조심스럽게 사용해야하죠. 클래스 선택자는 중복을 허용하고 이름도 요소의 용도에 맞게 지어놓으면 클래스의 역할을 알기 쉬워져서 좋은 것도 있습니다.
저렇게 점수로 선택자를 계산한다라고 아는건 실무자들도 잘 모르실거에요. 여러분들 이런 지식을 베이스로 깔고 취업하시면 분명 다른 실무자들과 차이가 생기실거에요.
-멘토님-

BEM 방식
https://velog.io/@fromzoo/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-BEM-%EB%B0%A9%EC%8B%9D


margin

  • 마이너스 margin을 주면 다른 범위를 침범하게 된다
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        .div1 {
            background-color: tomato;
        }
        .div2 {
            background-color: teal;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
</body>
</html>

1. margin collapsing(마진 겹침/상쇄 현상)

얘때문에 지난 번 클론 코딩 할 때 얼마나 힘들었는지..😂
수업 자료보다 더 잘 정리된 포스트가 있어서 그거 보고 공부했다


https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4


예전에도 읽었던 포스트인데 확실히 그때 봤을 때보다 한결 이해가 잘된다.
완벽히 이해가 될 때까지 계속 읽자!🚀

background image와 img 태그

정적인 이미지를 쓸 거면 background-image를 쓰고, 동적인 이미지를 쓸 거면 img 태그를 쓴다.
프론트에서만 다루는 건 background-image로 쓰지만, 백엔드에서도 다뤄야하는 건(db관련) img 태그를 사용하여 주는 경우가 많다.

Q. 이미지에 '정보'가 들어있으면 img태그로 써야하는 거 아닌가요?
A. img 태그는 alt 값을 이용하여 정보 전달을 할 수 있다. 하지만 백그라운드 이미지에도 숨김 텍스트를 사용하여 정보를 줄 수 있다.

-> 이와 관련해서는 내일 추가 설명 해주시기로 함!
추후에 여기에 추가해서 넣겠음!

Fonts

  • 상업적 목적의 활용이 가능한지 라이센스 꼭 확인하기
  • 폰트는 link보다는 import 해서 많이 사용한다.
  1. 추천 폰트 사이트
  1. 추천 폰트
  1. 아이콘

Position

1. position 값의 효용

position 또한 처음 css를 배울 때 이해하기 다소 까다로웠는데, 내가 이해한 대로 나름 정리해보자면,
우리가 html로 마크업을 하는 건 한마디로 말해서 문서를 쓰는 것이다. 우리가 손으로 a4용지에 글을 쓸 때, 기본적으로 왼쪽 위에서부터 아래로 차례차례 써내려가듯이, html에서도 똑같이 마크업 하는 순서대로 왼쪽 위에서부터 아래로 쭉쭉 써지게 되는데, 이걸 기본적인 상태 static 이라고 이해하면 된다. default 상태가 static인 것.
그런데 우리는 특정 애들 위치를 마음대로 바꾸고 싶을 때가 있잖다 '얘 여기서 오른쪽으로 조그만 이동시키고 싶어!'같은 경우
그때 relative랑 absolute 등등으로 걔 위치를 이동(지정?)시켜 준다. relative는 static 일 때 있던 위치 기준(그니까 지금 위치 기준)해서 왼쪽으로 이만큼만 이동했으면 좋겠어! 할 때 쓰는 것. 좌표계로 예를 들자면 지금 현재 위치가 (1,1)일 때, (1,2)로 이동하고자 할 때, relative 방식으로 말하는 건 '현재 위치에서 y축으로 +1만큼 이동해!' 라고 말하는 것과 같고 absolute 방식으로는 '원점에서 x축으로 +1, y축으로 +2만큼 이동해! ' 라고 말하는 것과 같다. 그리고 원점 기준은 static을 제외한 position속성을 가진 부모가 있다면 그 부모 기준, 없다면 body가 기준이 되겠다.

2. relative

원래 자신이 있어야 하는 위치(즉, static)에 대하여 상대적이다. relative는 자신이 원래 있던 자리를 기억하는데, 그래서 position: relative;라는 값을 주고 left : 50px; 이라고 추가적으로 적어 주면, 본인의 static 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 된다.
absolute의 기준점이 되는 것은 relative고 relative가 없다면 전체 body가 기준이다.

3. absolute

position: absolute;라고 한 뒤 top : 20px; right: 30px;이라고 추가적 값을 주면, 오른쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 볼 수 있다. 이들은 기준점이 html 위치에 있기에, 왼쪽 제일 상단이 본래 자신의 위치라고 생각하고 움직이게 된다.
그러나, 이 absolute도 눈치를 보는 녀석이 있는데, 바로 부모 요소이다. relative, absolute, fixed 같은 position 속성이 부모에 놓여있다면, absolute는 position 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 된다.

4. fixed

스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않았으면 한다면, 이 fixed 속성을 이용하면 된다. fixed는 현재 사용자가 보고 있는 뷰포트를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치한다. 요즘 많은 사이트들이 페이지가 스크롤 되어도 중요한 정보(네비게이션 같은)를 화면에 계속 노출 시켜주기 위해 많이 사용하는 속성이다.

5. sticky

fixed와 sticky 둘 다 스크롤을 하더라도 보여지는 공통점을 가지고 있다. 이 두 position의 차이점은 fixed는 문서의 흐름을 따르지 않고 뷰포트를 기준으로 배치가 되는 반면, sticky는 문서의 흐름을 따르면서 containing box를 기준으로 상대적인 위치에 배치됩니다. 즉, sticky는 스크롤에 따라 움직이다 정한 offset에 닿으면 그 순간부터 고정이 되는 것이 fixed와 가장 큰 차이점이다. 그래서 fixed를 쓰면 요소들이 겹쳐보일 수 있는 상황이 나올 수 있는 반면 sticky를 쓰면 그러한 상황을 예방할 수 있다.

https://www.kevinpowell.co/article/positition-fixed-vs-sticky/

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sticky</title>
    <style>
        body{
      height:500px;
      background:lightblue;
    }
    
    .other{
      height:1000px;
      background:yellow;
    }
    .other2{
      height:1000px;
      background:black;
    }
    .stiky{
      position:sticky;
     width:50px;
      height:50px;
      background:pink;
      top:10px;
    }
    </style>
</head>
<body>
    <div class="other">
        <div class="stiky"></div>
      </div>
      <div class="other2"></div>
    
</body>
</html>

위 예제 실행시켜 보면 확실히 알 수 있음.

6. static

position을 따로 설정해주지 않았을 때의 default 값.
static일 때에는 left, right, top, bottom 등의 속성은 사용할 수 없다.

7. z-index

z-index의 기본 값은 auto(부모의 position)이다. html의 z-index는 0이다. z-index는 position이 static이면 사용할 수 없다.

Float

1. float의 의미

float은 '띄우다'라는 뜻을 가지고 있으며 float 정렬은 다양한 객체를 띄워서 정렬을 하는 속성을 가진다.

2. 기본 개념

원래 float 속성은 아래 사진처럼 그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성이다.
하지만 왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 <div>, <p>, <table>과 같은 블록 속성을 가진 객체를 정렬하는 가장 기본적인 방법으로 사용되고 있다. float 정렬은 크게 두 가지 속성이 있다. 좌측 정렬, 우측 정렬이 있으며 중앙 정렬은 없다. 하지만 margin 속성을 이용해서 할 수 있다. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        img {
            width:200px;
            float:right;
        }
    </style>
</head>
<body>
    <img src="https://t1.daumcdn.net/cfile/tistory/235B2F485958F12129" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ad, autem quaerat sed impedit cupiditate tenetur recusandae facere, alias ab nihil nisi eligendi eaque ea molestiae dolore accusantium repellat maiores? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab aliquid officiis, at fugiat ratione expedita vel tenetur facere suscipit aut earum magnam in? Nihil perspiciatis laudantium minus officiis voluptatum cumque.
Veritatis ea, fugit tenetur ex fugiat magnam odio dicta! Ex quo commodi qui nesciunt harum voluptas iusto officiis tempora porro ipsam nemo quas, atque pariatur minus ab praesentium nihil! Praesentium!
Laboriosam at itaque adipisci, consequuntur quaerat quisquam dicta eum similique quia ex. Amet minus expedita dolor officiis ipsam exercitationem non, repellendus quaerat perspiciatis doloribus beatae iusto rem minima aut ut.
</body>
</html>

3. float의 문제점

전체를 감싸는 컨테이너가 자식 요소들이 모두 float 속성을 가질 때 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여주는 문제점이 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float 문제점 해결</title>
    <style>
        .wrap{
            border: 4px solid blue;
            /* overflow: hidden; */
        }
        .content{
            /* float 해제 해보면서 문제점 확인해보기 */
            float: left;
            margin: 5px;
            height: 20px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="content">내용1</div>
        <div class="content">내용2</div>
    </div>
</body>
</html>

4. 문제점의 해결

  1. 부모 요소에 overflow 속성을 추가한다.
    overflow은 넘치는 현상을 다루기 때문에 넘쳐흐르는 자식 요소를 포함하도록 부모 요소의 높이를 늘여준다. 즉 .wrap 부분에 overflow:hidden; 혹은 overflow:scroll; 등의 필요한 overflow 속성을 추가하여 해결한다.
.wrap {
    border: 4px solid blue;
		overflow: hidden; 
	}
  1. 부모 요소의 높이 값을 직접 지정해줍니다.
    강제로 부모에 높이를 주어 늘리는 것이므로 좋은 방법은 아니다. 만약 자식 요소의 높이가 변경 되었을 경우 혹은 자식 요소가 추가되어 부모 요소의 높이 수정이 불가피한 경우마다 부모의 높이를 변경해야 하므로 비효율적이다.
.wrap {
    border: 4px solid blue;
		height: 35px;
	}
  1. clear 속성 사용
    float 이 사용된 요소의 바로 다음 형제 요소에 clear 속성을 사용한다. clear 속성은 left, right, both 세 가지 값을 가지며 float이 사용된 요소가 정렬된 방향에 따라 적절히 사용해 주시면 된다.
<div class="first"></div>
<div class="second"></div>
div{
  width:100px;
  height:100px;
  background-color:black;
}
.first{
  float:left;
}
.second{
  clear:both; /* both 속성은 left, right 둘 다 클리어 합니다. */
  background-color:pink;
}
  1. clear-fix 방법
    CSS의 ::after 가상클래스로 해결한다. 부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법이다. 이러한 방법을 clear-fix 라고 한다. 이렇게 하면 부모 요소와 이후에 float요소를 따라오는 현상까지 모두 다 해결된다. display:block;대신 display:table;을 사용하기도 합니다.
.wrap::after {
	content:'';
	display:block;
	clear:both;
}

관련 영상
https://www.youtube.com/watch?v=xara4Z1b18I

Box Model

  1. border, paddingn은 width에 포함되지 않는다.
    box-sizing의 default가 content-box이기 때문.
  2. box-sizing:border-box;로 설정하면, 설정한 width 내에서 border와 padding이 적용된다. (margin은 border 밖 얘기이기 때문에 상관없는 얘기)

🐥과제. css로 나만의 캐릭터 만들기

https://github.com/vnfdusdl/html/blob/main/040_MyCharacter.html


따봉 36개나 받았다😊 감사해요🧡💛

📢 오늘의 회고

어떤 강의를 봐도 "요즘은 flex를 사용하지 float는 안 쓴다"란 말만 하고 제대로 가르쳐 주지 않아서 난 float를 아예 몰랐는데, 오늘 드디어 배웠다!😁 알고 안 쓰는 거랑 몰라서 못 쓰는 건 다르니까~~
margin collapsing 현상 때문에 지난 클론 코딩 때 혼자 너무너무 고생해서, 제대로 배울 수 있을까 기대했지만, 언급 정도만 하고 넘어가셔서 아쉬웠다. 나중에 실습 할 때 물어볼 기회가 있지 않을까?하며 오늘도 인터넷 포스트만 뒤적거렸다..
과제로 css로 본인만의 캐릭터를 만들어 올리기를 내주셨다. css로 만드는 것보다 어떤 캐릭터를 만들지 구상하는 게 더 힘들었다😓 멋진 작품을 올리신 분들도 많이 보이더라! 미적 감각 부러워 👍
강사님이 제주도에 계셔서 수업 중간중간 제주도 이야기도 하시곤 하는데, 나도 뭔가 제주도에서 일하고 싶어졌다. 근데 평생은 말고 딱 2년정도만?🙄🤣 나도 열심히 하면 내가 원하는 환경의 회사에서 일할 수 있겠지? 내일도 힘차게 가보자고 🚀

profile
김풀연
<strong>가보자고🚀</strong>
이전 포스트

211103 TIL

다음 포스트

211105 TIL

0개의 댓글