-
css 첫 걸음! css 구조 파악하고 class 활용하기web 2020. 7. 31. 00:18
안녕하세요! 오늘은 CSS에 대해서 공부해보려고 합니다.
자료는 개인적으로 공부의 목적을 가지고 하는 것이기 때문에~참고해주세요!~
먼저 CSS 의 사전적 정의
[ cascading style sheets ]
"웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다."
-네이버 지식백과즉 HTML (웹페이지뼈대)에 일괄적인 스타일을 지정하여 시간과 노력을 아낄 수 있다!란 말뜸!!
HTML을 보완하고 풍부한 디자인으로 설계가가능하다는 것이죠 ㅎㅎ
그럼 CSS는 어떻게 만들고 어떻게 활용할까..입니다.
저는 먼저 코딩을 수정 할 수 있는 프로그램을 다운로드했습니다.
html 파일을 만들어주세요! Notepad++ 에서 열고 index.html 파일을 만들고
폴더 안에 이렇게 위치하게 했어요~!
index.html 소스는 간단하게 기본만 작성해 보았습니다.
<!DOCTYPE HTML> <html lang='ko'> <head> <title>사이트명</title> <meta charset='utf-8'> <link href='css/style.css' rel='stylesheet'> </head> <body> <div id='wrap'> <footer id='footer'> </footer> </div> </body> </html>기본 구조로 셋팅을 하고!
그리고 이제 css 파일을 만들었습니다!
노트패드에서 index.html 파일은 그대로 두고 style.css를 만들고.
새파일->new- style.css / css 폴더 생성 / css폴더 안에 저장을 해줍니다.
@charset "utf-8";CSS는 꼭 이 명령어를 넣어줘야 해요!
charset "utf-8"은
어려우니까....그냥 눈으로 확인하고 ㅋㅋㅋ
그리고 양쪽에서 볼 수있게 스타일 시트에서 마우스 오른쪽을 클릭해서 분할창으로 보내서 보기 편하게 했어요!
이렇게 양쪽으로 볼 수 있게 해주시면 셋팅은 끝!!
이제 기본 셋팅은 끝났으니 간단하게 작업을 이어가볼게요!
오늘 만들 페이지는
이 페이지구요!
<!DOCTYPE HTML> <html lang='ko'> <head> <title>웹페이지만들기</title> <meta charset='utf-8'> <link href='css/style.css' rel='stylesheet'> </head> <body> <div id='wrap'> <div> <ul class='main'> <li><p>안녕하세요 사이트에 방문해주셔서 감사합니다.</p></li> <li><img src='images/hand-tree.jpg' alt=''></li> </ul> </div> <footer id='footer'> </footer> </div> </body> </html>이렇게 만들어주시고
css 폴더 만들었던 것처럼 images (그림파일폴더)를 만들었어요~
이렇게 위치하게 만들구요!
그림 폴더안에 사진을 아무거나 넣어주시고! 파일불러올때 파일명은 그림 폴더안에 있는 파일명과 동일하게 했습니다!
.main>li>img{width:1000px; height:800px;}여기 까지 햇을때 출력결과는
사진이 너무 커서 화면 밖으로 나가버리더라구요?
이거를 이제 / html에 있는 ul class에 main이라는 클래스를 지정하고 mian>li>img = main 하위의 li태그 하위 img태그의 사이즈를 width: 1000px; (넓이) height:800px; (높이)를 지정해주면
화면에 알맞는 사이즈로 바뀌게 되었습니다!
이렇게 바꿔주시고 한가지 작업을 더 해보도록 하겠습니다.
CSS의 장점을 극대화 해볼께요!
이미지 2개를 더 다운 받아주세요!
<!DOCTYPE HTML> <html lang='ko'> <head> <title>웹페이지만들기</title> <meta charset='utf-8'> <link href='css/style.css' rel='stylesheet'> </head> <body> <div id='wrap'> <div> <ul class='main'> <li><p>안녕하세요 사이트에 방문해주셔서 감사합니다.</p></li> <li><img src='images/hand-tree.jpg' alt=''></li> </ul> <ul class='main'> <li><p>안녕하세요 사이트에 방문해주셔서 감사합니다.</p></li> <li><img src='images/01.jpg' alt=''></li> </ul> <ul class='main'> <li><p>안녕하세요 사이트에 방문해주셔서 감사합니다.</p></li> <li><img src='images/02.jpg' alt=''></li> </ul> </div> <footer id='footer'> </footer> </div> </body> </html>이렇게 복사해서 ul 세트를 2개를 더 만들어 주고 이미지 폴더에 있는 이미지를 01,02를 불러옵니다!
그리고 CSS는 그대로 수정하지 않고 둘께요!
그러면 동일한 class main 한번 등록해둔 동일 선택자로 되어있기 때문에
사진만 바꿔줬는데 사이즈가 동일하게 출력됩니다!
그러니까 구조에 스타일 형식을 동일하게 적용해주어 반복작업을 간단히 해주면 적용이가능하다는 것!
이번..포스팅은 CSS를 간단하게 알려보자!의 의미로 접근했는데요 ㅋㅋㅋ
다음 포스팅에서는 태그부터 간단하게 공부해보려고...합니다. 페이지를 만드려니 오히려 어렵게 보이는 거 같아서요 ㅋㅋ ㅋㅋ
그럼 다음 포스팅에서 만나요!! (급 마무리...)
'web' 카테고리의 다른 글
Mac용 Safari 키보드 단축키 및 제스처 (feat. Mac os 단축키 포함) (4) 2020.10.03 Javascript_animate motion coding (0) 2020.08.01 카페24 html 수정하기 / 다음지도 사이트에 등록하기! (feat.다음지도 퍼가기) (2) 2020.07.16