본문 바로가기

HTML & CSS/HTML & CSS(2022 version)

(11)
CSS 기초(2) - 위치 조절 방법 및 기타 사항 1) CSS 기초 1-1) element 위치 조절하는 방법 1-1-1) display: inline-block; 1-1-2) float 속성 1-1-3) position 속성 1-2) 기타 2) 연습 코드 1) CSS 기초 (재강조!!) CSS 적용 방법 head 영역에 style 태그 추가 inline style link 태그를 이용해 외부 파일 연결 (>> 대부분의 개발자가 가장 일반적으로 많이 쓰는 방법) >> 각 방법별 세부사항은 이전 블로그 글( "CSS 기초 - 적용 방법 및 선택자, 주요 속성" ) 참조 1-1) element 위치 조절하는 방법 1-1-1) display: inline-block; 태그는 기본적으로 block 속성을 가지고 있다. 그렇기 때문에 태그 안에서 콘텐츠를 정렬하..
CSS 기초 - 적용 방법 및 선택자, 주요 속성 1) CSS 기초 1-1) CSS를 사용하는 이유 1-2) CSS 특징 1-3) CSS 적용 방법 1-3-1) head 영역에 style 태그 추가 1-3-2) inline style 1-3-3) link 태그를 이용해 외부 파일 연결 1-4) CSS 선택자 1-5) CSS 주요 속성 1-5-1) backgruoud-color 1-5-2) width 와 height 1-5-3) font-size 1-5-4) margin 1-5-5) padding 1-6) block, inline, inline-block 2) 연습 코드 1) CSS 기초 Cascading Style Sheets(CSS)는 마크업을 디자인하기 위해 작성돤 언어이다. CSS 역할: CSS는 기본적으로 HTML을 꾸며주는 역할을 하는데 이는 ..
HTML 기초 - 개념 및 기본 문법 1) HTML 개념 2) HTML 기본 문법 - , head 태그는 데이터를 저장하거나 rendering되는 것 이외의 내용을 작업하는 공간이다. >> title 태그와 같이 head 태그 내부에 속해있는 자식 태그들은 웹 브라우저 화면에 rendering되지 않음 head 태그는 브라우저 화면에 rendering하는 것이 아닌 rendering을 하기 위한 정보를 세팅하는 영역이라고 볼 수 있다. head 태그 안에 추가되는 부분으로 title 태그가 존재한다. 이때, title 태그는 웹 페이지를 열었을 때 tab에 제목을 저장해 주는 공간(주소창 위의 제목에 해당)이다. ~ body 태그의 경우, 웹 브라우저 화면에 보여지는 것들을 작업하는 공간이다. 즉, ~ 사이에 들어가는 내용들이 renderi..