CSS 연습 예제 내용을 정리합니다.
Udemy에서 The web developer bootcamp를 듣고 있으며 오늘은 css 예제 연습을 진행했습니다.
주어진 html 파일 소스는 수정하지 않고, css로 효과를 주는 것 입니다.
CSS는 이전에도 설명했듯이 웹의 형용사라고 생각하면 쉽습니다.
글씨를 빨갛게 배경을 검게 글자 사이즈를 크게와 같이 표현할 수 있습니다. 물론 html에서도 지원하는 기능이지만 CSS 파일을 연결하면 일일이 태그를 수정하지 않아도 됩니다.
제가 연습한 예제는 아래와 같습니다.
/* Style the HTML elements according to the following instructions.
DO NOT ALTER THE EXISTING HTML TO DO THIS. WRITE ONLY CSS!
/* Give the <body> element a background of #bdc3c7*/
body{
color:#bdc3c7;
}
/* Make the <h1> element #9b59b6*/
h1{
color:#9b59b6;
}
/* Make all <h2> elements orange */
h2{
color:orange;
}
/* Make all <li> elements blue(pick your own hexadecimal blue)*/
li{
color:#0000ff;
}
/*Change the background on every paragraph to be yellow*/
p{
background: yellow;
}
/*Make all inputs have a 3px red border*/
input{
border:3px solid red;
}
/* Give everything with the class 'hello' a white background*/
.hello{
background-color: white;
}
/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
#special{
border:2px solid blue;
}
/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/
p{
font-size: 25px;
}
|
css 적용 전 페이지
css 적용 후 페이지
css 적용 전 후가 대비되는 것을 볼 수 있습니다. 물론 이 것은 단순히 실습이기 때문에 촌스러워 보일 수 있지만 명확하게 어떤 역할을 하는지 알 수 있습니다.
아직 실습을 절반 정도밖에 진행하지 못했지만 css에 대한 개념은 많이 잡힌 것 같습니다.
