CSS 속성공부 #4 / 배경 속성
CSS 속성공부 #4 / 배경 속성배경 속성을 사용하면 해당 태그의 배경이미지 or 색상을 지정할 수 있다. 배경 속성 키워드 들은 다음과 같다. 1. background-image: 배경 이미지 지정. 2. background-size: 배경 이미지의 크기 지정. 3. background-repeat: 배경 이미지의 반복 형태 지정. 4. background-attachment: 배경 이미지의 부착 형태 지정. 5. background-position: 배경 이미지의 위치 지정. 6. background: 한 번에 모든 배경 속성(image, size, repeat 등)을 입력할 수 있음. 실전 예제 1. 배경 이미지를 지정하는 속성으로 스타일 값에 URL 단위 or 그레이디언트를 입력한다. 그레이디언..
CSS 속성공부 #2 / 박스에 대해 알아보자
CSS 속성공부 #2 / 박스에 대해 알아보자 / AimHo이번에는 웹 페이지의 레이아웃을 구성할 때 가장 중요한 박스에 대해 공부하려 한다. 박스는 아래 이미지에 표시된 속성을 모두 합쳐 박스 속성이라 이야기한다. 이미지출처: 한빛미디어 width, height 속성 여기서 글자를 글자라고 생각하면 된다. width와 height는 글자를 감싸는 영역의 크기를 지정한다. 단어 해석만 해봐도 어떤 속성인지 쉽게 알 수 있을것이다. margin, padding 속성 margin과 padding는 웹 페이지에서 여백을 만들때 많이 사용한다. 박스속성을 설명한 이미지를 다시 확인해보자. margin, padding의 차이가 보이는가?? 두 속성 모두 여백을 만드는 속성이지만, 테두리를 만드는 border를 기..
CSS 입문 / CSS선택자에 대해 알아보자!
CSS 입문 / CSS 선택자에 대해 알아보자!HTML 항목의 [간단한 웹 페이지 만들기!] 글을 기억하는가? 저기서 웹 페이지는 굉장히 투박한 모양을 하고 있다. 저 투박한 웹 페이지에 앞으로 공부할 CSS(Cascading Style Sheets)를 적용해야 이쁜 웹 페이지를 완성할 수 있다. HTML 첫 글에서 언급했었는데, 네이버도 CSS가 빠지게 되면 투박한 형태로 보여지게 된다. 이제 CSS를 공부해볼건데, 가장 기본인 CSS 선택자를 다뤄보려고 한다. 실질적으로 화면에 있는 무언가를 조작하는 것이 아니므로 지루하게 느낄 수도 있지만, CSS 선택자를 모르면 이후의 내용을 진행할 수 없으니 차근차근 익혀보기를 바란다. CSS 선택자란? CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는..
