본문 바로가기

📂 Web/HTML, CSS3

[CSS 단위] 아직도 헷갈린다면 이제는 확실히 알아두자. 아래 내용은 우아한테크: [10분 테코톡] 애슐리의 CSS의 단위 영상을 참고한 글입니다. 유익한 내용 발표해주신 애슐리 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다. 0. CSS 단위 : length 자료형CSS 단위는 CSS에서 사용되는 값들의 길이나 크기를 나타내기 위한 단위이다. 오늘은 CSS의 단위들 중, length 자료형에 속하는 단위들을 알아보겠다. length는 폰트 사이즈뿐만 아니라 width나 height와 같이 길이값을 나타내는 자료형이다. CSS에서는 길이값을 나타내기 위해서 px, rem, em등과 같은 다양한 단위들이 있는데 그 단위들은 크게 절대 길이 단위와 상대길이 단위로 나뉘게 된다.절대 길이 단위는 px, inch, pt와 같이 고정된 크기.. 2023. 8. 27.

HTML의 속성 이름과 속성 값의 차이는 무엇일까? 아래의 코드를 통해 HTML의 기초적인 구조를 알아보자. 1. 이 중 HTML 태그는 아래 두 가지다. HTML 요소의 태그는 보통 opening tag와 closing tag로 구성되어, 태그 사이에 컨텐츠를 넣어 구조를 표현한다. 여기서 주의할 점은 위에 표시 ‘HTML 요소’ 전체가 HTML 요소라고 판단하면 안 된다. 2. 이 중 HTML 속성 이름 (attribute name)은 ‘class’ 다. HTML의 속성(attribute)은 크게 두 가지로 구성되는데, 위의 이미지에서 속성 이름(attribute name)은 ‘class’ 다. 이는 속성 값(attribute value)인 ‘paragraph’와 분명히 구분되어야 한다. attribute name: 속성 이름 attribute val.. 2023. 2. 27.

HTML <div>태그와 <span>태그의 차이점 이해하기 HTML을 공부하다보면 태그들 사이에 차이점이 궁금한 것들이 있다. 대표적으로 와 인데, 표면적으로는 그게 그거 같아서 헷갈릴만하다. 가장 쉽게 이해하는 방법은 구글 크롬의 개발자 도구를 켜서 보는 것이다. 1. 한 줄 전체를 차지하는지 여부 차이 개발자 도구에서 영역에 마우스를 갖다 대면 한 줄 전체를 차지하고 있는 것을 볼 수 있다. 개발자 도구에서 영역에 마우스를 갖다 대면 한 줄 전체가 아닌, 컨텐츠(글자 수와 여백 등 포함)의 크기만큼만 차지하고 있는 것을 볼 수 있다. 2. 줄바꿈 가능 여부 차이 div 태그 영역 1 div 태그 영역 2 span 태그 영역1 span 태그 영역2 코드에서 두 단어를 과 태그로 똑같이 작성했는데 결과 화면을 보니 는 병렬적으로 배열되고, 은 한 줄에 나란히 배.. 2023. 2. 27.

이전 1 다음

티스토리툴바