스마트워크11 [CSS] float 사용법 float는 '뜨다'라는 의미로 웹페이지에서 컨텐츠(글, 이미지)를 어떻게 표시해서 다른 컨텐츠들과 배치할 것인가에 대한 속성이다. ◎ left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. ◎ right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시됨. ◎ none: 요소를 부유시키지 않음 ◎ inherit: 부모 요소에서 상속 2022. 9. 12. [CSS] overflow 사용법 overflow는 박스안에 컨텐츠(글, 이미지)를 보여주기에 충분한 공간이 없을 경우, 박스를 벗어나는 컨텐츠를 어떻게 다룰 것인지 설정합니다. ◎ 속성1 : visible 영역을 벗어난 부분을 짜르지 않고 눈에 보이게 함. ◎ 속성2 : hidden 영역을 벗어난 부분을 숨겨서 눈에 안보이게 함. ◎ 속성3 : scroll 영역을 벗어난 부분과 상관없이 자동으로 스크롤 생기게 만듦. * overflow-x:scroll : 가로축 스크롤 생성. * overflow-y:scroll : 세로축 스크롤 생성. ◎ 속성3 : auto 영역을 벗어난 부분이 있으면, 자동으로 스크롤 생기게 만듦. ◎ 속성3 : inherit 부모요소 속성을 상속함. 2022. 9. 12. [CSS] width와 max-width 차이 ◎ width: 100%로 지정한 경우에는 : 창의 크기를 줄이거나 늘리면 창의 너비에 맞춰 크기가 충실히 증감한다. ◎ 가로 너비 값을 아무 것도 지정하지 않은 경우 : 창의 크기를 줄여도 이미지 크기에 아무런 변화도 없다. ◎ max-width: 100% 로 지정한 경우 : 창의 크기를 줄이면 줄인만큼 충실히 줄어들지만, 크기를 키울 때는 원래 이미지 사이즈보다 커지지는 않는다. 출처: https://ccuram.tistory.com/29 2022. 9. 12. <Html> 레이아웃을 위한 시맨틱 요소 시맨틱(semantic) 이란 무엇일까? ▩ 시맨틱 HTML? 프로그래밍에서 시맨틱(semantic)이란, '코드조각'을 의미한다. HTML5 이전에는 모든 구조를 를 통해 잡다보니 한눈에 알아보기 어렵다는 지적이 있었고, 이를 개선하기 위해 HTML5 부터 시맨틱 태그(,,,,,)를 사용하게 되었다. 태그종류 표시방법 내용 header 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치한다. 페이지 맨 위에 쓸 때는 사이트의 제목이 보통 들어가며, 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다. 태그랑 헷갈리면 매우 곤란하다. section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 된다. 이건 아래 footer 태그도 마찬가지다. nav 내비게이션(navig.. 2022. 3. 9. 이전 1 2 3 다음
