재밌고 어려운 IT를 이해해보자~!
CSS, HTML 본문
HTML은 웹사이트에서 화면에 표시되는 정보
CSS는 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할을 한다.
CSS는 Cascading Style Sheets의 약자로 HTML, XHML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.
HTML로 문서의 뼈대를 만들면 CSS는 이 문서를 꾸며 글꼴, 배경색, 위치, 너비와 높이 등을 지정하거나 웹 브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정하는 것.
초창기 웹은 HTML만으로 만들기, 꾸미기를 하였으나, 웹 사이트가 폭발적으로 커지면서 여러개의 공통적인 문서(HTML)를 1개의 디자인이 변경되면 모든 파일을 수정하여야 되는 문제가 발생하게 되었다.
CSS는 이런 문제를 동시에 해결할 수도 있고, 웹 페이지 정보와 스타일을 분리하여 유지보수를 수월하게 할 수 있습니다.
CSS로 기대되는 효과?
① 정보(HTML)와 디자인(CSS)를 분리하여 관리가능
② 정보를 수정하지 않고 디자인만 변경가능
⇒ 태그마다 style 속성으로 주게 되면 소스코드가 지저분해 지는데, 분리하여 관리하게 되면 유지보수 및 가독성이 좋아진다.
③ 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문할 수 있도록 유도가능
⇒ 시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석하도록 할 수 있다. (웹접근성)
CSS 사용방법은?
CSS는 보편적으로 사용되는 방법은 3가지!
CSS는 어떠한 방법으로 작성하냐에 따라 차이가 존재.
1. HTML 안에서 style 속성을 이용하는 방법
2. <style> 태그를 통해 HTML 문서 내부에서 이용하는 방법
3. 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법
이 중 여러 문서를 수정하기에는 2, 3번이 좋고 그 중에서도 3번으로 작성하는 것이 제일 좋다.
현업에선 무조건 외부 3번.
CSS는 누가 배워야 하나?
HTML과 CSS를 다루는 것은 퍼블리셔이다. 개발자와 디자이너가 기초 공사를 끝내면, 퍼블리셔가 더 보기 좋고 접근하기 쉽게 웹 접근성을 고려하여, HTML과 CSS, JavaScript를 이용해 배치하고 이쁘게 꾸민다..!
프론트엔드의 코드작성 후 즉각적인 시각 피드백은 확실히 재밌다!
화면구성에 관한 코드는 실습을 통해서 알아가고 직접 작성하고 찾아보자~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 스타일시트 vs 외부 스타일시트</title>
<style>
.gnb, li{
border: 2px solid lightblue;
color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box"> <!--여러개존재할수있어서클래스시용 -->
<h1> 타이틀 01</h1>
<u1 class="gnb"> <!--글로벌네비게이션바-->
<li>베스트 상품</li>
<li>신상품</li>
<li>고객센터</li>
</u1>
</div>
<div class="box">
<h1>타이틀 02</h1>
<ul class="lnb">
<li>외투</li>
<li>후드티</li>
<li>바지</li>
<li>운동화</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
li {
list-style-type: none;
}
.gnb li {
display: inline;
}
.gnb li a {
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
background-color: lightblue;
text-align: center;
text-decoration: none;
}
.gnb li a:hover {
width: 200px;
height: 80px;
font-size: 50px;
transition: all 2s;
background-color: lightsalmon;
text-decoration: underline;
}
</style>
</head>
<body>
<ul class="gnb">
<li><a href="https://www.naver.com/">메일</a></li>
<li><a href="https://www.naver.com/">카페</a></li>
<li><a href="https://www.naver.com/">블로그</a></li>
<li><a href="https://www.naver.com/">쇼핑</a></li>
</ul>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이용약관</title>
<style>
.agree {
width:500px;
height: 300px;
border:1px solid black;
overflow-y: scroll;
}
</style>
</head>
<body>
<p class="agree">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</body>
</html>'교육전 개인공부' 카테고리의 다른 글
| 문자 API [TEAM PROJECT] (0) | 2024.02.20 |
|---|---|
| MVC Pattern Self Practice (1) | 2023.12.18 |
| 리스트로 수정해보는 로또 (1) | 2023.10.29 |
| 파일 입출력 (0) | 2023.10.28 |
| 쓰레드 (0) | 2023.10.26 |