자라나라

position 속성이란? 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성이다. static, relatice, absolute, fixed, sticky 중 하나의 값으로 지정할 수 있다. static 기본값. 요소를 문서의 흐름에 따라 배치한다 relative 문서 흐름에 따라 배치하되, 상하좌우 오프셋을 적용할 수 있다. absolute 문서 흐름에서 제외. 부모요소에 대해 상대적으로 오프셋 적용 fixed 문서 흐름에서 제외. 지정한 위치에 고정 sticky 문서 흐름에서 제외. 스크롤 동작이 존재하는 가장 가까운 요소에 오프셋 적용​ static을 제외한 나머지 속성 값에서는 좌표를 이용해 요소의 각 위치를 조절할 수 있다. top, right, bottom, left 속성으로 요소를 배치할..

안냐심까~~~ 저번글(box model)이 너무 길어져서 왠지 제가 루즈해지는 거 같아 한 번 끊고 왔습니다 그럼 바로 시작합니다 overflow 위처럼, content가 너무 커서 요소의 box안에 다 담을 수 없을 때 처리할 수 있는 방법. 아래의 세가지가 있다. overflow:hidden; 요소의 크기보다 큰 부분은 가려짐 overflow:auto; 요소의 크기보다 큰 부분이 있으면 스크롤생성, 키보드 컨트롤x overflow:visible; 그냥 기본형태. 위의 이미지가 이것이다. auto, hidden 속성을 초기화 1. overflow: hidden; 처음 이미지에 hidden값을 주면 이처럼 초과되는 content는 그냥 안 보이게 된다. 2. overflow: auto; 스크롤이 생성된다..

Box model이란 태그들에 (위치, 간격 등으로) 부피감을 주는 속성이다. 설명하기에 앞서 차이를 느낄 수 있도록 태그에 border를 주겠다 border-width: 5px; border-style: solid; border-color: maroon; 쓸 것없이 위와 선언 한줄이면 가능 border: width style clolor; 순서가 좋다! ex) border: 3px solid coral; 위는 padding을 차례로 10, 30, 50px을 넣어준 결과이다. 우리가 패딩을 껴입은 거처럼 border 안쪽이 두툼해졌다 즉 padding은 content와 border 사이의 간격을 말한다. padding-top , padding-right 등으로 좀더 specific하게 값을 설정할 수 있..

CSS(Cascading Style Sheets)란 HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어로, 쉽게말해 html을 디자인해주는 언어이다. 1. html파일을 스타일링 하는 방법 1-1. html 파일에 직접 꾸며주기 직접 꾸미는 방법엔 두가지가 있다. 파일 에 ruleset을 두거나, 그때그때 스타일링 해주는 inline stlye. Inline style은 그때그때 쉽게 변화를 줄 수 있으나, 가독성이 매우 떨어지고 유지보수도 힘들다. CSS ruleset은 html파일에 은 지우고! 그러고 run해주면 ~ 아무 변화가 없다! 두 파일을 이어주지 않았기 때문. 그럼 다시 html파일로 돌아가서, 이렇게 링크를 걸어주면 끝! 은 relationship을..