개발새발 로그

1. 상속(Inheritance) 상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다. 프로퍼티 상속 width/height no margin no padding no border no box-sizing no display no visibility yes opacity yes background no font yes color yes line-height yes text-align yes vertical-align no text-decoration no white..

folat float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 프로퍼티를 사용해야 한다. float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다. float 프로퍼티를 사용하지 않은 블록 요소들은 수직으로 정렬된다. float..

CSS에서 사용되는 단위는 px, %, em, rem 가 있다. 그 차이에 대해 알아보자 em em은 같은 엘리먼트에서 지정된 자기 자신의 font-size를 기준으로 px로 바뀌어 화면에 표시 rem rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환, 보통 HTML tag에서 지정된 font-size가 기준이된다. px px는 절대적인 값입니다. 다른요소의 값에 영향을 받지 않습니다. % %는 상대적인 값입니다. %는 주로 박스이 길이를 화면 크기에 맞추어야할 때 사용한다. 더 알아보기 vw vw는 Vieprt Width vh는 Viewport Height 둘다 뷰포트를 기준으로한 단위로서 보여지는 영역에서 얼만큼 차지할 것인지를 지정하는 단위 1vw = 5px; -> 1vw ..

Grid는 두 방향인 가로와 세로로 된 레이아웃 시스템이다. 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다. 사용법 .container { display: grid; } grid-template-columns : 40% 60% : 40% 60%로 나눔 grid-template-columns: 4fr 6fr 이것과 동일하다. . item:nth-child(odd) : 홀수 자식들에게는 다른 속성을 줌 grid-gap :1 rem : 그리드마다 여백을 줌 ->갭을 쓰게 되면 40% 60%으로 했을 때 그 공간 이외에도 옆에 공간이 생겨서 가로스크롤이 생김 -> grid-templ..

CSS Flex -그림과 같이 flex를 적용하면 왼쪽에서 오른쪽으로 쌓아진다. -flex-direction은 row가 기본값이다 (안 적어도 row로 적용됨) -flex-direction : column -flex-direction : row-reverse -flex-direction : column-reverse flex-wrap -뷰 포트가 아이템들의 폭보다 줄어들었을 때 어떻게 할건지 정하는 것이다. -원래는 아무것도 적용하지 않으면 잘려서 보이게 된다. flex-wrap : wrap flex-wrap: wrap-reverse : 거꾸로도 가능 justify-content 지금 현재 축 방향으로 정렬해주는 것이다. 즉 축을 기준으로 왼쪽 오른쪽 가운데 등으로 정렬한다. justify-content..

CSS의 Box Model 영역에는 content , padding, border, margind 이 있다. 그리고 box-sizing 속성을 통해 width, height 프로퍼티의 대상 영역을 변경할 수 있다. box-sizing 프로퍼티의 기본값은 content-box이다. 이는 width, height 프로퍼티의 대상 영역이 content 영역을 의미한다. box-sizing 프로퍼티의 값을 border-box로 지정하면 마진을 제외한 박스 모델 전체를 width, height 프로퍼티의 대상 영역으로 지정할 수 있어서 CSS Layout을 직관적으로 사용할 수 있게 한다. box-sizing -Content box Content box는 box-sizing의 기본값으로 우리가 따로 설정하지 않으..

태그나 태그를 사용하면 아래처럼 자동으로 보기 좋게 간격을 띄워놔준다. 이러한 간격은 css로 디자인을 따로 하지않아도 자동으로 설정되는 것이다. 근데 만약 우리가 개발할 때 어떤 디자인에 맞춰서 개발을 해야한다고 생각해보자. 그렇게 되면 이러한 서식들은 정확한 css를 작성할 때 방해가 될 것이다. 이런 원래있는 서식들을 취소해주는 코드를 작성해야 내가 원하는 서식을 적용할 수 있을 것이다. 이때 필요한 것이 CSS reset이다. 기본 서식이 들어가지 않은 순수한 상태로 만들어주는 것이다. 구글에 CSS reset을 검색하면 다양한 css reset들이 있다. 그 중에서 나는 아래의 링크를 이용했다. https://cssdeck.com/blog/scripts/eric-meyer-reset-css/ E..

float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법 float 프로퍼티는 본래 아래 예제와 같이 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다. See the Pen Untitled by 신준혁 (@miduksdl-the-lessful) on CodePen. float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다. none 요소를 떠 있게 하지 ..