Ch 8. CSS 속성-1

🎯이번 챕터는

CSS를 구체적으로 배우는 과정이었다.

어떻게 작동시키며 어떤 부분을 수정해야 브라우저에 뜨는지 등을 확인하고

마지막으로 HTML과 CSS만을 이용해서 오버워치 캐릭터 선택 화면을 만들었는데

이 두가지만 가지고도 이렇게 만드는 것을 보면 정말 기초에 충실한것도 중요하다고 

생각이 든다.

---

⭕01. 개요

📌강의 정리

• css의 속성들에 대해 알아보자.
• html의 속성은 어트리뷰트이고
• css의 속성은 프로퍼티이다.
• css의 속성을 보면 화면에 어떻게 나올지 예상을 하는 것도 중요하다.
• 박스 모델, 글꼴, 문자, 배경 등등의 여러 개념이들이 있다.
• 박스모델은 가로너비, 세로너비 같은 것을 박스모델이다.
• 글꼴, 문자는 폰트라고 얘기하는 서체를 얘기한다.
• 배경은 사각형이라는 요소에는 배경과 배경색상 배경이미지로 꾸밀수 있다.
• 배치는 원하는 요소를 특정 위치에 가져다 놓는것을 배치라고 한다.
• 플렉스(정렬)은 수직으로 쌓이는 레이아웃을 수평으로 정렬할때 플렉스라는 기술을 사용한다. 띄움이라는 기능도 있는데 플렉스 이전의 기술이다.
• 전환은 요소의 전 상태와 후 상태를 자연스럽게 애니메이션으로 적용해주는 개념이다.
• 변환은 요소를 회전하거나 이동시키거나하는 css속성들을 얘기한다. 2d변환과 3d변환이 있다.
• 띄움은 요소를 공중으로 띄운다는 것을 말한다. 요소 주변으로 문자가 흐를 수 있는 구조를 말한다. 마치 신문기사의 기사들에 쓰이는 기술이다. 플렉스 이전에는 많이 썼지만 이제는 플렉스로 수평을 정리하기에 띄움 본연의 기능만이 쓰인다.
• 애니메이션은 전환에서는 전 상태와 후 상태만 쓰이지만 좀 더 복잡한 구조의 애니메이션의 개념에서는 애니메이션 개념을 쓴다.
• 그리드는 마소의 스프레드시트 같은 2차원의 레이아웃을 만드는 기능이다.
• 다단이라는 개념은 신문이나 뉴스기사처럼 글이 많을 때 하나의 페이지에서 여러개의 단을 다단이라고 한다.
• 필터는 최신의 기술인데, 이미지가 뿌옇게 보이게 하는 것을 blur이고 흑백으로하는것은 grayscale, 이미지의 반전은 reverse이다.

 

📌느낀점

본격적으로 css속성을 들어가기 전에 앞으로 배울 내용들을 간단하게 정리해봤다.

얼핏 한번씩 들어봤던 내용들이었지만 이렇게 한번에 정리하면서 들으니 더 잘 정리가 되는 느낌이다. 좋다.

---

⭕02. 너비(width, height)

📌강의 정리

• 박스모델을 알아보자.
• 코드펜에서 html에는 div를, css에는 100px,orange를 해준다.
• 우리가 지정해주지 않은 브라우저 기본여백은 초기화해준다. 코드펜에서는 css base에서 reset이다.
• 이제 css에서의 width를 주석해주면 오랜지 다 커진다.
• width는 가로너비를 의미한다.
• height를 주석해주면 오렌지가 안보인다.
• height는 세로너비를 의미한다.
• 요소의 가노/세로 너비
• auto는 기본값이다. 요소에 이미 들어있는 속성의 값이다.
• 브라우저가 너비를 계산, 단위는 px,em,vw등 단위로 지정한다.
• width와 height는 기본값을 auto로 가지고 있는다.
• span은 대표적인 인라인 요소로 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다.
• 이런 인라인 요소들은 포함한 콘텐츠 크기만큼 가로,세로너비가 자동으로 줄어든다.
• 하지만 div같은 블록요소는 다르다 div는 본질적으로 아무것도 나타내지않는, 콘텐츠 영역을 설정하는 용도이다.
• hello 는 부모요소의 크기만큼 자동으로 늘어난다, auto
• 세로는 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
• 백그라운드 속성은 html의 요소의 배경을 칠해주는 속성이다.
• 실제로 div에 hello를 해주면 가로너비는 최대한 늘어나고 세로너비는 글자크기만큼만 auto로 늘어난다.
• span이면 가로,세로너비 둘다 컨텐츠의 너비만큼만 적용된다.
• span요소는 인라인요소라서 width,heigth를 100px씩 해도 변화가 없다.
• 인라인요소는 글자를 위한 요소이기 때문이다.
• 요소가 커질 수 있는 최대 가로/세로 너비를 max-width, max-height이다.
• none 최대 너비 제한 없음, 단위는 px,em,vw등 단위로 지정한다.
• 이 max는 너비를 제한하는 것이다.
• 요소가 작아질 수 있는 최소 가로/세로 너비는 min-width, min-height이다.
• 0 최소 너비 제한 없음, 단위는 px등을 단위로 지정한다.
• 부모와 자식의 div 클래스를 만들어주고 css에서 부모와 자식으로 설정해주면 부모가 위드스300이면 자식도 똑같이 300이 된다. auto일 경우
• 또한 이런 개념을 적용하여 부모가 auto로 제일 커져도 자식에서 max-width가 300px이면 더이상 커지지 않는다.
• width와 height 속성의 역할은?
• 요소의 가로세로너비를 지정해주는 역할이다.
• width와 height의 속성의 기본값은? auto이다.
• max-width와 max-height의 속성의 기본값은? none
• min-width 와 min-height의 기본값은? 0이다. 0은 단위필요없다.

 

📌느낀점

그냥 평소 잘 쓰고 있던 width와 height의 변화를 체험할 수 있었다.

개념을 정확히 알아야 오류가 나도 어디서 났는지 바로 알 수 있다.

이제는 ma, min을 포함하여 잘 사용할 수 있을 것 같다.

---

⭕03. CSS 단위

📌강의 정리

• 단위들에 대해서 알아보자.
• px 픽셀은 하나의 디바이스가 표현할 수 있는 점을 말한다.
• 1920 * 1080일때의 하나의 1이 픽셀이다.
• 픽셀은 절대단위로 여겨지지만 엄밀히따지면 상대단위이다.
• %는 상대적 백분율이다. 어떤것을 비교해서 몇퍼센트인지 상대적단위이다.
• em은 요소의 글꼴 크기이다. 글꼴크기가 10px이면 1em은 10px이다.
• rem은 루트요소(html)의 글꼴 크기이다. 여기서 루트는 최상위 요소이다.
• vw는 뷰포트 가로 너비의 백분율이다.
• vh는 뷰포트 세로 너비의 백분율이다.
• 뷰포트는 화면에 출력되는 화면을 말하고 1vw이면 상대적으로 뷰포트를 100으로 쪼갰을 때 그 100중 1이라는 뜻이다.
• 코드펜에서 부모와 자식관계를 만들어줬다.
• width는 300개의 px이다. 이때 child는 width가 100%이면 부모만큼의 가로너비이지만 50%이면 부모요소의 50%만큼만 채워진다.
• 글자는 대부분 상속이 되므로 html요소의 폰트사이즈는 기본적으로 16px이지만, 개발자도구의 select와 computed로 확인 가능하다.
• 이때 width가 10em이면 em이 글자크기폰트였으므로 16*10으로 160px임을 알 수 있다.
• 이때 부모요소에서 폰트사이즈가 10px되면 자식요소의 10em도 달라진다. 100px으로 160em에서
• rem은 html에서의 폰트크기만 참조하기 때문에 부모요소의 폰트크기가 달라져도 자식요소에서의 20rem은 변하지않는다. html크기만 기준으로 하기때문이다.
• 가로 너비에 50vw이면 화면의 절반만큼을 사용하게 된다.
• 세로너비도 50vh로 뷰포트기준으로 채울 수 있다.
• em 단위의 기준은? 요소의 글꼴 크기
• 0px과 0vw 중 더 큰 값은? 모두 같은 값이다.

 

📌느낀점

단위에서도 css를 통해 여러가지를 디자인 할 수 있다는 점을 느꼈다.

좀 더 깔끔하고 부드러운, 그리고 동적으로 적용되는 코드를 짜는데 많은 도움을 줄 수 있을 것 같다.

---

⭕04. 외부 여백(margin)

📌강의 정리

• margin이라는 속성을 배울 것이다.
• 요소의 외부 여백(공간)을 지정하는 단축 속성이다.
• margin은 음수를 사용할 수 있다.
• 가로(세로)너비가 있는 요소의 가운데 정렬에 활용한다.
• 코드펜에서 div로 container클래스로 부모있고 자식으로 item3개가 있다.
• .container .item으로 선택자를 써주고 margin을 20px해주면 외부 여백을 하면 서로 여백이 늘어난다.
• 또한 margin-bottom을 해주면 아래쪽에만 여백이 생긴다.
• 단축속성은 무슨 뜻일까? 외부에 아무 값이 없었는데 margin으로 10px을 주면 위아래 좌우에 10px가 들어간다.
• 이때 띄어쓰기를 이용해서 값을 주면 탑바텀이 10px 좌우가 20px이다.
• 이때 3개를 작성하면 띄어쓰기로 구분해서 하면
• 탑이 10px 좌우가 20px 바텀이 30px이다.
• 만약 4개라면 탑 우 바텀 좌 인데 이것은 맨위부터 시계방향으로 구분된다.
• margin은 단축키같은 역할도 할 수 있기에 단축속성이라고 한다.
• 이 구조는 margin에서만 사용되는 방식이 아니므로 잘 알아두면 좋다.
• margin-방향을 하면 개별적으로 값을 줄 수 있다.
• margin 속성의 역할은? 요소의 외부 여백
• margin: 40px 30px 20px이면 30px은 좌우를 의미한다.
• margin: 20px 10px;이면 20px는 탑,바텀을 의미한다.
• margin에 음수 값을 추가하면 아이템이 겹쳐지게 된다.

 

📌느낀점

margin에서의 기초 사용법을 알아봤다.

상하좌우를 설정할때 단축속성을 이용해서 조금 더 편리하게 그리고 음수를 이요해서 좀 더 다양하게 사용할 수 있을 것 같다.

---

⭕05. 내부 여백(padding)

📌강의 정리

• 요소의 내부 여백(공간)을 지정하는 단축속성이다.
• 패딩은 요소의 크기가 커진다.
• 내부 여백은 기본적으로 0이다.
• 내부여백의 %는 쓰인다.
• 부모요소의 가로 너비에 대한 비율로 지정한다.
• 테두리선이라는 border를 추가해주었다.
• 이제 선택자를 하나 더 추가한다.
• .container .item:first-child 를 해주면 첫번째 요소만 해줄 수 있다.
• 이제 개발자도구를 보면 패딩영역이 바뀜을 알 수 있다.
• 개발자도구의 computed탭을 통해 알 수 있다.
• margin과 마찬가지로 탑바텀좌우를 바꿔줄 수 있으며 이는 요소의 크기가 커지는 것이다.
• 값이 1,2,3,4개 일때 다 다르게 해석된다. margin과 같음
• 패딩속성의 역할은? 요소의 내부 여백을 담당.
• 패딩속성의 특징은? 추가되는 만큼 요소의 크기가 늘어난다.

 

📌느낀점

기본적으로 margin과 비슷했고 단지 값이 늘어나면 요소의 크기 늘어난다는 점이 추가 되었다.

---

⭕06. 테두리 선(border)과 색상 표현

📌강의 정리

• 요소의 테두리 선을 지정하는 단축 속성인 border를 알아보자.
• 선-두께 선-종류 선-색상
• 요소의 크기가 커진다.
• 순서는 바뀌어도 되지만 width, style, color가 추천된다.
• 코드의 독특함을 유지하려 하지마라.
• 여기서도 전과 같이 컨테이너를 만들고 그 자식을 아이템을 두개 만들어 이제 클래스를 두개 하위선택자로 해주어 첫번째만 수정해본다.
• border: 10px solid black이면 border가 보이며 요소의 크기가 커짐을 알 수 있다.
• 만약 선 스타일이 none이면 선이 나오지 않는다.
• 하지만 solid이면 선의 두께가 나오게 된다.
• 보더 width는 요소 테두리 선의 두께만 나오게 된다.
• 기본적으로 medium값이지만 기본적으로 애매하므로 피해야하며 그러므로 정확한 단위값을 주어 명시하는것이 좋다.
• 또한 각각의 방향을 margin과 padding처럼 상하좌우를 값을 적어주는 개수로 조절할 수 있다.
• border-style은 기본적으로 none으로 화면에 표시되는것은 없다. style에서만
• solid는 실선이며 dashed는 파선으로 우리가 보통생각하는 절취선이고 진짜 점선은 dotted이다.
• 마찬가지로 보더스타일도 각각을 상화좌우 설정해줄 수 있다.
• dotted red를 하면 점으로만 나온것으로 실제로 볼 수 있다. dashed를 더 많이 쓴다.
• border-color는 요소 테두리 선의 색상을 지정하는 단축속성이다.
• 기본적으로 검정이고 transparent는 투명하게 할 수 있다.
• 마찬가지로 상하좌우를 설정해줄 수 있다.
• border-color는 색상표현으로도 값을 지정해줄수 있는데 #000, #FFFFFF가 가능하고
• rgb(255, 255, 255)같은 빛의 삼원색이 가능하고, rgba(0, 0, 0, 0.5)이면 투명도 까지 포함해줄 수 있다.
• hex 색상코드인 #000 , #FFFFFF를 제일 많이 쓴다.
• hsl과 hsla는 일반적으로 잘 사용되지 않는다.
• 요소의 테두리선을 지정하는 기타속성들이 있다.
• 방향을 입력하고 속성도 입력할 수 있다.
• border-top-width를 하면 top의 두께만 조절한다.
• 이런식으로 다양하게 개별적인 속성을 바꿔줄 수 있다.
• border의 특징은 요소의 크기가 늘어난다.
• 두께 2px, 종류 실선, 색상 red이면 border: 2px solid red;이다.

 

📌느낀점

자주 쓰이는 border에 대해서 배웠다.

배우고 나니 뭔가 당연한걸 빠르게 짚고 넘어간것 같다.

---

⭕07. 모서리 둥글게(border-radius)

📌강의 정리

• border-radius는 요소의 모서리를 둥글게 깎을 수 있다.
• 기본적으로는 둥글게 없고 단위를 이용하여 조절할 수 있다.
• border-radius: 10px;을 하면 둥글게 깎이며 20px이면 더 크게 깍인다
• 10px이면 모서리에 반지름10px정원을 그려 그 원을 기준으로 깎아준다.
• 이것도 margin이나 padding과 마찬가지로 상하좌우를 조절해줄 수 있다. 왼쪽 상단부터 시작.
• 0은 별도의 단위를 붙이지 않는다.
• 요소의 모서리를 둥글게 깎기 위한 속성은 border-radius

 

📌느낀점

디자인적으로 부드럽게 보이기 위한 CSS속성이었다.

---

⭕08. 크기 계산(box-sizing)

📌강의 정리

• box-sizing은 요소의 크기 계산 기준을 지정한다.
• 요소의 내용으로 크기를 계산해주는게 기본값이다.
• 추가로 border박스로도 크기를 계산해줄 수 있다.
• 컨테이너를 부모로 아이템 두개 만들어주고 가상선택자로 처음만 선택해준다.
• 이제 요소를 보더와 패딩으로 키워준다.
• 키워준 후에 128*128이 되었다.
• 원래는 100px이었으므로 28이 커진건데 이것을 어떻게 측정하느냐의 문제이다.
• 둘다 내용으로 hello를 넣어주면 더욱 크기 조절이 안됨을 알 수 있다. 100px로 고정하려면 어떻게 해야하는가?
• 그러려면 수동으로 조절해줄 수도 있지만 box-sizing을 써주면 border-box를 해주면 전체 크기는 동일해진다.
• 즉 가로 세로 너비는 100px로 고정되며 패딩과 보더가 늘어나도 전체 크기는 늘어나지 않는다.
• box-sizing의 기본값은 컨텐츠박스영역만 조절하지만
• box-sizing border box이면 패딩과 테두리까지 다 조절이 된다.
• width: 100px; padding: 20px; border: 1px solid red이면 142px이 된다.
• width: 100px; padding: 20px; border: 1px solid red box-sizing borderbox이면 100px고정이다.
• box-sizing의 기본값은 content box이다.

 

📌느낀점

실제 프로젝트에 아주 편리하게 사용될만한, 몰랐으면 개고생을 했을듯한 과정이었다.

정말 편리하게 쓸 수 있을 것 같으며 css가 정말 프로그래머에게 친절하다는 것을 느꼈다.

---

⭕09. 넘침 제어(overflow)

📌강의 정리

• 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성이 overflow이다.
• 기본적으로는 visible 넘친내용을 그대로 보여준다.
• hidden은 넘친내용을 잘라낸다.
• 부모하나 자식하나가 있는 html이다.
• 원래 자식은 디폴트로 div이므로 부모의 width를 따르지만 더 넘치면 자식이 더 많이 보여진다.
• 이때 부모의 css속성으로 overflow: hidden 또는 scroll을 해주면 넘치는 내용을 안보이게 하거나 스크롤로 볼 수 있게 할 수 있다.
• 또한 auto값을 주면 넘치는 부분에만 스크롤바를 만들어 줄 수 있다.
• visible은 넘친값을 그냥 보여주고
• hidden은 잘라낸다.
• scroll은 수평수직에 스크롤바를 만들어주고
• auto는 넘친 부분에만 스크롤바를 만들어준다.
• 안넘쳐도 scroll이면 스크롤바가 보여지게 된다. 그래서 auto를 많이 쓴다.
• overflow는 단축속성인데 x이면 x축으로만 체크 y는 y축으로만 체크한다.

 

📌느낀점

만약 padding이 넘치면 어떻게 대처해야할지의 좋은 방안이었다.

특히 스크롤을 잘 사용할 수 있을 것 같다.

---

⭕10. 출력 특성(display)

📌강의 정리

• display는 요소의 화면출력(보여짐)특성이다.
• 기본적으로 상자요소,인라인요소,글자+상자요소 등등이 있다.
• div요소는 이미 display속성이 block이고
• span은 이미 display속성이 inline이다.
• 이때 display속성의 값을 inline-block을 하면 둘 다 섞여 쓸 수 있다.
• 그 외에 flex이면 (1차원 레이아웃)
• grid는 (2차원 레이아웃)
• none은 보여짐 특성이 없으므로, 화면에 사라진다.
• 코드펜에서 봐보자 hello world를 span요소로 구성했다.
• body가 margin 20px이고 span이 width 120px height가 30px이다.
• 우리는 인라인 요소를 블럭요소로 만들고 싶을때도 있다.
• 이때 span태그선택자로 display에 block값을 주면 된다.
• 이러면 width height값이 적용이된다.
• 또한 값으로 none을 주면 화면에서 일시적으로 사라지게 하는 용도로 종종 쓴다.
• a태그의 가로너비를 지정하려면? 우선 display속성에 값을 block으로 준다.

 

📌느낀점

생각지 못했던 부분들을 많이 알려주는 것 같다.

예를 들어 a태그에서도 a태그가 인라인요소이기때문에

가로너비를 바꾸어야 할 경우 어떻게 할지 같은 문제들이 그러하다.

프로젝트를 만들어보고 싶은 생각이 든다.

---