직장인자기계발

패스트캠퍼스 챌린지 13일차 - Part1. Ch8

이번에는 글꼴과 관련된 속성들을 살펴보자. font-style : 글자의 기울기를 설정하는 속성으로 기본값은 기울기가 없는 normarl이다. italic은 이텔릭체(기울어진 글자) 이다. font-weight : 글자의 두께(가중치)를 설정하는 속성이다. 기본값은 normal, 400이며 두껍게는 bold, 700 이다. 100-900 사이의 100단위의 값을 입력할 수 있다. font-size : 글자의 크기를 지정한다. 기본 크기는 16px이며 px, em, rem 등 의 단위로 값 지정이 가능하다. line-height : 한 줄의 높이를 설정하는 속성으로 행간과 유사하다고 보면 된다. 숫자를 입력하면 요소의 글꼴 크기의 배수로 지정되며, 단위를 이용해 설정할 수도 있다. 배수를 사용하는 방법을 ..

패스트캠퍼스 챌린지 12일차 - Part1. Ch8

border-radius는 요소의 모서리를 둥글게 깎는 요소이다. 만약 10px로 설정하면, 모서리 부분에 반지름이 10px인 정원을 배치하고 둥근 부분만큼 모서리를 깎아낸다. 값은 왼쪽 위 모서리부터 시계방향으로 4개를 적용시킬 수 있다. (ex. border-radius: 0 10px 0 0) box-sizing은 요소의 크기 계산 기준을 지정하는 속성이다. 요소의 내용으로 크기를 계산하는 content-box, 요소의 내용+padding+border로 크기를 계산하는 border-box 두 가지 값이 있으며 기본값은 content-box이다. 음.. 그러니까 가로너비를 100px로 지정하고 padding 20px border 4px 이렇게 지정하면 100에 48px만큼 크기가 커지게 된다. cont..

패스트캠퍼스 챌린지 11일차 - Part1. Ch8

이번엔 margin 속성에 대해 알아보자. margin은 요소의 외부 여백을 지정하는 속성으로, 특이하게 음수도 사용할 수 있다. 기본값은 외부 여백이 없는 0이며, 브라우저가 여백을 계산하는 auto는 가운데 정렬에 활용된다. margin-top, right, bottom, left에 각각 여백을 따로 줄 수 있으며, 값을 하나만 넣어주면 위아래 좌우에 모두 적용된다. 또는 값을 두 개 넣어주면 각각 위아래, 좌우로 세 개 넣어주면 위, 좌우, 아래로 네 개 넣어주면 위 오른쪽 아래 왼쪽 이렇게 적용된다. 참고로 음수 값을 넣어주면 외부 여백이 줄어들어 요소들이 겹칠 수도 있다. 다음으로 padding은 margin과 반대로 요소의 내부 여백을 지정하는 속성이다. 기본값은 내부 여백이 없는 0이며 단위..

패스트캠퍼스 챌린지 10일차 - Part1. Ch8

Ch.8 CSS 속성 CSS에서 속성은 Properties로 HTML의 속성 Attributes와는 표현이 약간 다르다. 크게 박스 모델, 글꼴 문자, 배경, 배치, 플렉스, 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터로 나눌 수 있다. width 와 height는 요소의 가로 세로 너비를 지정해준다. span 은 인라인 요소로 기본값은 포함한 콘텐츠 크기만큼 설정되고, div 는 블록 요소로 기본값은 가로는 부모 요소의 크기만큼, 세로는 포함한 콘텐츠 크기만큼 설정된다. 인라인 요소는 가로 너비가 최대한 줄어들려 하고, 블록 요소는 최대한 늘어나려 한다는 게 차이점이다. 그리고 인라인에는 width와 height를 설정할 수 없다는 점 다시 상기하자!! max-width, max-height..

패스트캠퍼스 챌린지 9일차 - Part1. Ch7

이번에는 스타일 상속에 대해 알아보자. 예를 들어 사진과 같은 코드가 있을때, 호랑이, 사자, 코끼리의 부모 요소로 animal 클래스를 가진 div 요소를 확인할 수 있다. .animal 선택자에 스타일을 주면 동물 부터 호랑이, 사자, 코끼리 까지의 코드에 모두 스타일이 적용된다. animal 클래스에 css를 적용했을 때 자식 요소, 나아가 하위 요소들에 영향을 미치는 것을 스타일 상속 이라고 한다. 즉 부모 요소 혹은 조상 요소로부터 적용된 스타일이 자식이나 하위 요소로 상속되어 적용되는 것을 css의 스타일 상속 이라고 한다. 모든 요소가 상속 되는 것은 아니고 글자/문자 관련 속성들이 상속된다. 물론 여기에도 예외는 있음! 실질적으로 상속되지 않는 css 내용도 강제적으로 상속시킬 수 있는 강..

패스트캠퍼스 챌린지 8일차 - Part1. Ch7

Ch7. CSS 개요 CSS는 HTML의 기본 구조를 보기 좋게 꾸며주는 역할을 한다. 이제 CSS에 대해 알아보자! 선택자 { 속성: 값; } CSS에서 중괄호 영역 앞쪽에 작성하는 부분을 HTML의 특정한 부분을 선택한다는 의미에서 선택자라고 부른다. 사진 속 해당 예제에서 div 부분이라고 볼 수 있다. HTML에서 선택자에 해당하는 부분에 중괄호 영억의 속성과 값들이 적용된다. 주석을 작성하고 싶을 때는 /* */ 와 같이 작성하면 된다. (단축키 : Ctrl + /) CSS의 선언 방식에는 크게 4가지가 있다. 1. 내장 방식 의 내용으로 스타일을 작성하는 방식으로 HTML의 HEAD 요소에 작성한다. 별도의 CSS 파일이 필요 없다는 장점이 있지만 유지보수 측면에서 단점이 많다. 즉 권장하지 ..