본문 바로가기

전체 글291

CSS Float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. mozilla에서 float을 위와 같이 정의한다. 보통, 단어 뜻 그대로 '떠다닌다' 하면 뭘 어떻게 떠다닌다는 것인가? 라는 의문이 들기 마련이다. float은 인라인 요소가 float속성이 적용된 요소를 감싸는 효과라고 생각하면 된다. left - 부모요소의 left side부터 차례대로 위치된다. right- 부모요소의 right side부터 차례대로 위치된다. none- float형태로 적용되나 다음에 오는 element의 좌우 크기가 남은 공간보다 크면 다음 줄에.. 2020. 5. 6.
CSS Padding, Border, Margin Padding: Content영역에서부터 여유공간 치수이며 Padding을 변경하여도 content영역인 width, height는 변하지 않음. Border: content영역에서 padding만큼 떨어진 공간에 위치하는 테두리이며 테두리 선을 지정할 수 있다. 박스의 내부, 외부를 구분하는 테두리로 보면 된다. Margin: border와 다른 border사이의 여유공간. 박스 간의 여백을 위한 값이다. 주의할 점은 inline element의 경우에는 상하 padding, 상하 margin이 원활하게 적용되지 않음. 2020. 5. 5.
CSS Height and Width css의 height, width에 설정할 수 있는 종류는 5가지이다. auto: 따로 지정하지 않으면 auto가 default이고 브라우저가 계산한 값으로 들어감. length: px, cm 등 수치를 입력하는 방법. %: 해당 element를 감싸는 block의 width, height를 기준으로 계산됨. initial: default value로 설정(?). 브라우저가 지정한 값으로 설정. inherit: 부모의 값을 사용. ?auto와 initial이 같은 의미로 보이나 다른 점을 발견하면 수정 필요함. height, width 설명 https://www.w3schools.com/css/css_dimension.asp initial 설명 https://developer.mozilla.org/ko/.. 2020. 5. 5.
HTML DOM 이란?(Document Object Model) 크롤러를 개발하거나, 웹 프론트엔드 자바스크립트 개발 시 document라는 단어가 들어있는 api들을 보았을 것이다. 이때 document에 관련된 글이다. 우리가 작성한 html, css 파일은 결국 각각의 파일로서 저장이 되어있는 상태이다. 그럼 이것을 결합해주는 방식은 어떻게 될까? 바로 파서들에 의해서 파싱 되고 이를 트리 형태를 기반으로 한 DOM이 되는 형식이다. html->파싱 ┐ ㅡㅡ> DOM -> 브라우저에 의해 화면에 표시 css->파싱 ┘ 위와 같이 간략하게 나타내는 것이 우리가 프론트엔드 개발을 한 후 화면에 보이는 절차이다. 우리는 DOM이라는 중간 모델을 거쳐서 화면에 표시되게 된다. 따라서 우리가 동적인 웹을 만들게 되면 javascript를 사용하게 되는데 이때, html .. 2020. 5. 5.

티스토리툴바