웹 언어 배우기/CSS 다한(dahan) 2018. 11. 17. 09:00
css 박스 모델은 홈페이지에서 중요한 요소 중 하나로 뽑히고 있습니다. 구조를 이해한다면 쉽게 사용할 수 있습니다. 좀 더 자세히 어떤 점에서 중요한지 하나씩 알아보겠습니다. 웹 브라우저 크롬으로 알아보는 박스 모델 위 사진은 크롬에서 지원해주는 박스 모델입니다. 파란색으로 되어 있는 곳이 html 부분(content)입니다. border 영역을 기준으로 안쪽에 위치하는 영역을 padding, 바깥영역을 margin으로 구분하고 있습니다. 좀 더 자세히 알아볼까요? 테두리 안쪽 영역, padding 위 사진은 border 속성만 넣은 예제입니다. 여기에서 테두리 안에 있는 영역을 어떻게 하면 움직일 수 있을까요? 바로 padding에 값을 주면 됩니다. css 테두리 효과를 주는 border 속성 한가..
더 읽기
웹 언어 배우기/CSS 다한(dahan) 2018. 11. 10. 09:00
위 사진은 네이버를 빨간색 테두리로 구역별로 나눈 것입니다. 상단은 header, 목록은 nav, 뉴스 컨텐츠는 section1, 과학, 법률 등의 목록은 section2, 로그인부분은 aside로 나눴습니다. 네이버를 더 자세히 들여다보면 회색으로 테두리가 있는 것을 알 수 있습니다. 이는 모두 css에서 테두리 효과를 주는 border 속성을 이용한 것입니다. 그럼 지금부터 border 속성에 대해 알아보겠습니다. border 속성 기본 구문 border 속성은 전체 테두리를 설정할 수 있고 한 곳(아래, 위, 왼쪽, 오른쪽)만 테두리를 줄 수 있습니다. 먼저 전체 테두리를 설정하는 구문입니다. border: border-width border-style border-color; border-widt..
웹 언어 배우기/CSS 다한(dahan) 2018. 11. 1. 08:06
html이 웹페이지의 뼈대(틀) 역할을 한다면, css는 웹페이지의 디자인, 레이아웃 등 스타일 역할을 합니다. CSS는 Cascading Style Sheets의 약자로 html 요소들이 각종 디자인, 레이아웃 등 사용자에게 어떻게 보여지는지 정의하는 스타일 시트 언어입니다. html과 css의 결합형태 즉, 기본 문법은 어떻게 되는지 알아보겠습니다. CSS 기본 문법 구글이라는 링크를 코드로 적어보면, 구글로 이동 여기에 CSS를 적용하여 폰트의 색깔을 하얀색, 배경색을 빨간색으로 하는 코드를 적어보면, 로 적을수 있습니다. CSS 문법은 선택자와 선언부로 구성됩니다. 위 코드에서 선택자는 a태그 입니다. 즉, 적용하고자하는 html 요소를 의미합니다. 선언부는 하나 이상의 속성과 속성값으로 중괄호(..