꾸생의 DevLog

HTML DOM(Document Object Model)

DOM(Document Object Model) DOM은 HTML 문서를 객체로 표현한 것이며, 객체 지향 모델로 구조화된 문서를 표현하는 형식이다.(W3C 표준 방식) DOM을 이용하여 HTML 문서의 모든 Element를 접근, 변경할 수 있다. 동적 HTML구현이 가능하다. Tree구조 위에서 말했듯이 DOM(Document Object Model)은 HTML 문서의 객체(Object) 기반으로 구조화된 형식으로 표현한 것으로 위의 사진과 같이 "노드 트리"로 표현된다. 하나의 부모 노드가 여러 개의 자식 노드들을 가질 수 있는 구조로 되어있다. 체크사항 1. DOM은 HTML이 아니다. (동일할 수 있지만 원본 소스와는 다를 수 있다) 2. 자바스크립트가 DOM을 수정해도 HTML 문서의 내용을 ..

2020.10.15  

[CSS] float: left 속성 요소 가운데 정렬하기

float: left 속성 요소 가운데 정렬하기 헤더에 네비게이션 메뉴를 만드는 도중 전체를 헤더 가운데에 고정하고 싶었지만 요소에 float: left 속성이 적용되어 있어 또한 왼쪽에 고정되어 있는 상황 해결방법 1. float: left 속성을 display: inline-block으로 대체 2. 사이 간격은 margin: -2.9px로 해결 3. 헤더 text-align: center 적용으로 가운데 정렬 [HTML/CSS] CSS만 활용한 사이드 메뉴 CSS만 활용한 사이드 메뉴 See the Pen MWeeOKp by junheeleeme (@junheeleeme) on CodePen. checkbox와 태그를 활용한 사이드 메뉴 사용자와 개발자의 체크박스 사용 용도가 달라도 너무 다르다. j..

2020.10.09  

[CSS] 반응형을 위한 미디어(@media)쿼리 사용법

반응형을 위한 미디어(@media)쿼리 사용법 화면(Screen)의 표현식은 Width, height, color와 같은 미디어의 특성을 이용하여 복합적으로 스타일 시트를 적용할 수 있습니다. 미디어 쿼리는 화면의 크기에 따라 컨텐츠의 변경없이 적절한 모양을 보여줄 수 있습니다. 즉, 사용자마다 제각각인 환경에 대응하기 위해 반응형 웹을 구현하는데 사용 - 미디어 쿼리 두 가지 사용 방법 - 1. 요소를 사용 max-width: 768px 즉, 화면의 너비가 768px 이하일 경우 style.css 파일을 불러옵니다.(유지보수에 용이) 2. CSS 안에서 @media를 사용 @media screen and (max-width: 768px) { body{ background-color: #eee; } } ..

2020.10.08  

[CSS] 요소 화면 중앙에 배치하는 방법

CSS 화면 중앙에 요소 배치 방법 HTML요소를 CSS속성으로 화면 중앙에 배치하는 방법을 알아보도록 하겠습니다. 1. position과 transform 사용 .box { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); } absolute 속성으로 3차원으로 띄운 후 너비와 높이의 길이만큼 50%씩 밀어낸 후 자신의 너비와 높이 크기의 반만큼 당기는 방법입니다. 이 방법의 장점으로는 width, height의 길이가 유동적이어도 사용 가능하다. 단점 : IE8 이하 사용 불가능

2020.10.06  

[CSS] 트랜지션(transition)

트랜지션(transition) 트랜지션은 HTML 객체에 동작이 일어날 때 움직임의 속도를 부여하는 속성 ex) transition: all 1s linear 1s; 주로 사용되는 스타일 속성 위치 : top, right, bottom, left크기 : width, height여백 : margin, padding테두리 : border, border-radius색상 : color, background-color투명도 : opacity변환 : transform 트랜지션(transition) 속성 transition-property: 변화를 적용할 CSS속성 지정 transition-duration: 움직임의 전체 시간 지정(s)transition-timing-function: 움직임의 패턴transition..

2020.10.02  

[CSS] Display속성 inline / block / inline-block 차이점

inline / block / inline-block 차이점 css display 속성 3가지의 특징과 각각의 차이첨을 알아보도록 하겠습니다. 1. display: inline 대표적으로 태그를 예로 들을 수 있으며 text의 크기만큼 공간 차지하고 줄바꿈을 하지않는다. width, height : 적용 불가능margin, padding-top/bottom : 적용 불가능line-height : 적용 불가능 display:inline; 2. display: block block은 대표적으로 태그로 줄바꿈 기능을 무조건 포함하고 있습니다. display:block; 3. display: inline-block inline-block 속성은 이름처럼 inline 속성의 특징과 block 속성의 특징 둘 다 ..

2020.10.01