나빈스 코딩

Position요소를 자유자재로 움직이거나, 위에 덧댈 수 있기 때문에 position을 쓴다.static(초깃값), relative, absolute, fixed, sticky로 총 5개로 요소의 상태를 바꿀 수 있다.staticstatic은 요소의 위치를 정해줘도(left,right,top,bottom) 본인 자리에서 움직이지 않는다.relativerelative는 본인 자리의 왼쪽 위를 기준점으로 해서 위치를 정해줄 수 있다. 다른 요소들은 영향받지 않는다.absoluteabsolute는 브라우저의 왼쪽 위를 기준점으로 해서 위치를 정해준다. 보통은 부모를 relative로 둬서 기준점을 부모요소의 왼위로 두고 쓴다. 다른 요소들은 그 자리를 차지하고, 자기자신은 블록박스의 성질인 가로를 최대로하는..

"나의 첫 HTML&CSS 웹 디자인" 이라는 책을 공부하며 정리한 글입니다.FlexboxFlexbox는 가로로 나열하고 싶을 때 쓴다.(Flutter로는 Row나 Wrap 위젯)Flexbox 사용법1. 가로로 늘어놓고 싶은 요소의 부모 요소를 찾는다.2. 부모 요소에 display:flex;를 지정한다.기본축?Flexbox는 가로로 나열한다.그렇다면 Flexbox의 기본축은 가로일까 세로일까?당연히 가로이다.가로로 막대기를 요소들에 끼워넣고, 그 선을 따라 요소들이 움직이는 이미지를 떠올리자.교차축은 세로이다.세로로 막대기를 요소들에 각각 끼워넣고, 마찬가지로 움직이면 된다.Flexbox를 만들면 자식요소의 크기는?기본적으로 최소 크기로 바뀐다.flex-basis: 920px; 자식요소에 이렇게 지정하..

블록 박스 인라인 박스마크업한 태그만으로는 CSS를 적용하기 어려울 때가 있다.그럴 때 위와 같이 의미를 갖지 않는 태그로 감싸주면 된다.

CSS의 다양한 선택자CSS는 요소의 스타일을 지정한다.스타일을 지정하려면 요소들을 잘 가리키는 게 중요하다.이제 다양하게 요소들을 가리키는 방법을 알아보자.A B { }띄어쓰기로 구분만 한다면A 요소 안에 있는 B 요소 전체를 가리킨다.A > B { }>로 구분하면A 요소의 직접적인 자식 B를 가리킨다.

figure 태그는 본문에서 직접적인 언급이 없지만 본문의 이해를 돕는 요소에 감싼다. 모양이 못생겨서 내가 먹은 당근들

"나의 첫 HTML&CSS 웹 디자인" 이라는 책을 공부하며 정리한 글입니다.문서 구조를 정하는 태그들을 알아보자!문서 구조를 정하는 것은 유지보수도 수월하고, 검색엔진을 최적화하여 검색시 상위에 올릴 수 있는 등 장점이 매우매우 많다.그래서 구조를 정하는 건 매우 중요하다.이제 그 중요한 역할을 하는 태그들을 알아보자.(참고로, header, main, aside, footer가 같은 위계를 가지고 있다.)header제목과 내비게이션을 포함한 태그nav페이지 이동하는 내비게이션을 감싸는 태그mainheader 다음으로 오는 부분.페이지의 주제가 되는 부분에 한 번만 사용하는 태그article자기완결성이 있는 요소에 감싸는 태그.트위터 게시물이나 인스타 게시물같이 외부에서도 따로 쓰일 수 있는 걸 말한다..

블록 박스는부모의 폭을 가득 채우려는 성질을 가지고 있기 때문에 박스의 가로를 줄여주고 margin에 auto 속성을 추가한다.인라인 박스는그 박스가 포함된 부모 블록박스에서 text-align:center;를 추가한다.

박스의 가로와 세로에 padding과 border를 포함시킨다는 뜻이다.직관적으로 이해할 수 있어서 좋다.