프로그래밍 (21) 썸네일형 리스트형 CSS.5 이전 글에서는 박스모델에 대해서 배웠다. 이번에는 우리가 알게된 박스모델을 활용하는 것을 배워보자. 사실 이제는 알아야할 지식이 없다. 우리가 하고 싶은데로 활용을 하면 된다. 태그에 margin을 없앨지, padding을 변경할지 등을 생각하고 바꿔주면 된다. 또한 박스모델을 오른쪽만 줄지 왼쪽만 줄지 아래만 줄지도 결정할 수 있다. CSS.4 박스에 대해 알아보자 웹페이지를 보면 테두리들을 자주 볼 수 있다. 우리는 CSS라는 언어를 이용해서 구현할 수 있다. 먼저 웹에 박스를 만들어보겠다. h1태그와 a태그에 빨간색 박스를 만들었다. 근데 여기서 알아야할 게 있다. h1태그인 css의 박스는 화면전체를 채우고 있고 a태그인 html의 박스는 자신의 컨텐트만 채우고 있다. 태그를 크게 두가지로 나눌 수 있다. 하나는 화면 전체를 이용하는 block level element, 다른 하나는 자신의 컨텐트만 이용하는 inline element이다. 여기서 h1태그는 block level element, a태그는 inline element에 해당한다. block과 inline은 태그의 기본적인 속성이고 우리가 바꿔줄 수 있다. 이젠 코드를 효율적으로.. CSS.3 text를 가운데 정렬하거나 크기를 키우는 방법에 대해 알아보자 먼저 정렬하는 Property는 text-align이고, 크기를 정하는 Property는 font-size이다. font-size옆에는 px이나 %를 사용하여 크기를 적절하게 조절하면 된다. 선택자와 속성을 이용하여 효과 주는 방법을 배웠다. 하지만 우리가 배운 방법으로는 일부 선택자들에게 효과 주기가 어렵다 그래서 그룹을 묶어 효과 주는 방법에 대해 알아보자 먼저 a태그안에 class라는 html언어를 사용한다. 그리고 .saw를 이용하여 효과를 준다. 여기서 .saw의 의미는 class가 saw인 선택자가 있는 태그에게 효과를 준다 이다. 여기서 '.'을 잘 기억하자 class 안에 다른 선택자를 넣어 효과를 줄 수 있지만 그렇게 되면 .. CSS.2 CSS언어는 HTML과 완전히 다른 언어이다. CSS언어는 효과를 주기 위한 언어이다. 컴퓨터가 HTML과 CSS를 구분할 수 있도록 하기 위해 태그를 사용하여 CSS인지를 확인시켜 주었다. style태그를 이용하여 누구에게 어떤 효과를 줄 지 입력했다. 여기서 '누구'를 선택자(selector) 그리고 어떤 '효과'를 효과(declaration)이라 부르기로 했다. 선택자와 효과를 이용하여 웹을 꾸며주었다. 하지만 그 중 일부는 다른 효과를 주고 싶을 때가 있을 수 있다. 그럴 때에는 '속성'이라는 것을 이용한다. 두 번째 리스트는 빨간색이 아닌 검정색 효과를 주고 싶으면 style 이라는 속성을 이용하면 된다 여기서 style 속성은 컴퓨터에게 이것은 CSS언어라는 것을 표시해주는 역할을 한다. 그리.. CSS.1 1. CSS 등장배경 HTML이 등장하며 웹에 정보를 입력할 수 있게 되었다. 하지만 사람들은 단순히 정보를 입력하는 것에 만족하지 않았다. 문자를 정렬하고 싶었고 색을 입히고 싶었다. 그렇게 CSS라는 언어가 탄생하였다. 2. 예시 예시를 살펴보자(지금 보는 것은 CSS는 아니다, HTML 이다.) 지금은 웹에 정보만 입력되어 있다. 우리는 여기에 색을 입히고 싶다. 이렇게 색을 추가할 수 있다. 이제 앞으로 우리는 웹에 단순히 정보만 입력하는 것이 아니라 보기 좋게 꾸밀 수 있게 되었다. 3. 맛보기 HTMl언어로 색을 추가해야한다면 위에 예시처럼 태그안에 하나하나 입력을 해줘야한다. 그것은 효율적이지 않기 때문에 우리는 CSS언어를 이용한다. HTML언어 안에 CSS언어를 넣게되면 컴퓨터는 이것을 .. 이전 1 2 3 다음
