이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 배경 속성 background-color 속성 요소의 배경에 색상을 넣을 수 있다. 속성 값으로는 색상값을 사용하면 된다. background-image 속성 요소의 배경에 해당 속성을 사용하면 이미지를 넣을 수 있다. 속성 값은 삽입할 이미지의 경로를 url() 함수로 지정하면 된다. 요소의 배경 크기가 반드시 지정되어야 한다. 이미지의 크기가 요소의 배경크기와 맞아야 한다. -요소의 배경이 이미지 크기보다 작으면 잘린다. -요소의 배경이 이미지 크기보다 크면 이미지 패턴이 반복된다. backgrount-repeat 속성 요소의 배경 크기가 삽입하려는 이미지보다 크면 이미지를 자동으로..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 박스 모델을 구성하는 속성 HTML 문서에서 사용된 각각의 요소가 어떤 원리로 웹 브라우저에 배치되어 표시되는지 이해하려면 박스 모델을 알아야 한다. 박스 모델은 모든 HTML 요소가 사각형의 박스로 둘러 쌓여 있다는 개념이다. 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 결국 웹 페이지를 만드는 본질이다. 박스 모델은 아래와 같은 4가지 요소로 구성된다. 박스 모델은 크롬 웹브라우저 개발자도구(F12, ctrl+shift+i)에서 살펴볼 수 있다. margin 영역 margin은 박스 모델에서 가장 외부에 있는 영역으로, 요소의 외부 여백을 담당..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. CSS의 특징 기본 스타일 시트 hn 태그는 단순히 태그만 사용했는데도 웹 브라우저에는 텍스트가 다양한 크기와 굵기로 표시됐다. HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없다. 그렇지만 웹 브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문에 위와 같은 모양으로 표현될 수 있는 것이다. 기본 스타일 시트 기본 스타일 시트란 글꼴이나 크기, 색상, 굵기, 문단 설정과 같은 스타일이 미리 정의된 파일 또는 문서 양식을 말한다. 기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우선 적용된다. 적용 우선순위와 개별성 specificity 위와 같..

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. 기본 선택자 사용 전체 선택자 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로, * 기호를 사용해 표시한다. 전체 선택자 전체 선택자는 모든 요소를 한 번에 선택할 수 있다. 태그 선택자 태그 선택자는 HTML 태그명으로 선택자를 지정하는 방법이다. 태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한 번에 선택한다. 안녕 하이 안녕 안녕 아이디 선택자 아이디 선택자는 HTML 태그에서 사용할 수 있는 id 속성 값을 이용해 선택자를 지정하는 방법이다. 이때 속성값 앞에는 # 기호를 붙여 구분한다. 안녕 id 속성값은 고유해야 한다...

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다. CSS : Cascading Style Sheets 문법 형식 CSS 문법은 크게 선택자와 선언부로 구분한다. 선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역 선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역, 중괄호 안에 작성 선언부에 작성하는 스타일은 반드시 속성과 값을 한 쌍으로 작성 값의 뒤에 세미콜론을 넣으면 여러 스타일을 연속해서 작성 가능 안녕 줄 바꿈과 들여 쓰기 CSS 코드를 작성할 때, 줄 바꿈과 들여 쓰기를 꼭 할 필요는 없다. 그러나 줄 바꿈과 들여쓰기를 적절하게 사용하면 코드의 가독성을 크게 향상할 수 있다. 스타일 시트 스..