오늘은 사전스터디 모임의 첫날이었다. 1주차 과제는 html, css를 이용해 자기소개 웹페이지를 만들어오는거였는데 다들 정말 잘 만들어 오셔서 시간대비 투자를 얼마 하지 않은, 또 너무 초보자 티가 나는 나의 자기소개 웹페이지는 너무 부끄러운 기분이 들었다. 스스로 좀 더 반성하는 시간이 되었던 것 같다. 이제 시작인데 벌써부터 다른 사람들보다 뒤쳐지는 기분이 들어서는 안될것 같다는 생각이 들었다. 그래도 이렇게 같은 목적의 사람들이 모여 있다는 것에 의욕이 조금 더 생겼다. 혼자 공부하지만 혼자 공부하는 것이 아닌, 그게 개발자로 나아가는 길이 아닐까 싶다.
나는 css는 공부해보지 않은 상태라서 자기소개 웹페이지를 만들때는 일일히 구글링을 하며 알아보고 찾아보았는데 아직은 너무 지식도 없고 비루하지만 그래도 스스로 찾아보고 했던게 조금은 도움이 된 것 같다. 앞으로는 더욱 더 열심히 해야겠다는 마음을 먹게 되었다.
그래서 오늘은 조금이나마 자기소개 웹페이지를 만들면서 사용했던 css에 대해서 포스팅하려 한다.
CSS에 대하여
css는 html과 함께 웹 표준의 기본 개념이다. html로는 텍스트나 이미지, 표와 같은 요소를 이용하여 웹사이트의 내용을 만들고 css로는 텍스트의 색상이나 크기, 이미지의 크기나 위치 같은 웹 사이트의 디자인을 만든다.
스타일과 스타일시트
1.인라인 스타일(inline style)
간단한 스타일 정보는 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다. style="속성:속성 값" 형태를 이룬다.
<p style="color:red;">2.내부 스타일 시트(internal stylesheet)
html 문서 안에서 <style> 과 </style> 안에 css코드를 넣는 방법이다. 보통 <head> 와 </head> 사이에 넣으나 문서 어디에 넣어도 잘 적용된다.
<style>
h2{
font-size:30px;
color:pink;
}
</style>3.외부 스타일 시트(linking stylesheet)
별도의 css파일을 만들어 html 문서와 연결하는 방법이다. 같은 스타일을 여러 웹문서에 사용할 때 편리한 방법이다.
<link rel="stylesheet" href="외부 스타일 파일 경로">자기소개 웹페이지를 만들며 이용한 css 속성들
padding-top: 120px;상단메뉴바에 가려진컨텐츠 보이게하기 위해 px을 메뉴바의 px보다 크게 조절한다.
font-size: 17px;글씨 크기이다.
letter-spacing: 0.1em; 글자 간격을 조절할때 사용한다.
background-color: rgb(234, 249, 250);배경 색상이다. 색상을 표현하는 방법으로는 직접 색상을 입력하는 방법과 #기호 다음에 6자리의 16진수로 표시하는 방법, rgb, rgba가 있다.
a {
color: black;
}a링크의 글자 색을 정한다. 위에서는 검정색이라 정했다.
a:hover {
text-decoration: none;
color: black;
}마우스가 글자 위에 있을때의 스타일이다. 위에서는 다른 효과없이 그대로 검정색을 유지하는 것으로 표시했다.
a:active {
color: red;
} 마우스로 클릭할 때의 스타일이다. 위에서는 클릭할 때 빨간색으로 변하도록 정했다.
position: fixed;
top: 0;
left: 0;
right: 0;위에서는 네비게이션 바의 속성을 표현하였는데 스크롤을 위아래로 움직여도 고정되기 위해 fixed를 썼다. 또 네비게이션 바의 공백이 없게 하기 위해 top, left, right 속성에는 0을 썼다. left, right 속성 대신 width: 100% 를 써도 같다고 한다.
<center>중앙정렬</center>중앙으로 정렬하고 싶은 문서를 <center> 와 </center> 사이에 쓴다.
font-weight: bold;글자 굵기를 진하게 쓰고 싶을 때 넣는다.
line-height: 1.5;줄 간격을 조절할 때 쓴다.
