UI 구현 표준(WEB)의 구성요소
- 웹 표준 : 웹 기술을 표준화하기 위한 일련의 단계와 요구사항이다
- 웹 접근성 : 어떠한 사용자(장애인, 노인 등), 어떠한 기술 환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것을 뜻한다.
- 웹 호환성 : 서비스 이용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공하는 것을 의미한다.
웹(WEB)의 3요소
- 구조 : HTML
- 표현 : CSS
- 동작 : JavaScript, 웹프로그래밍언어(JSP, ASP, PHP, Python ~~)
CSS (Cascading Style Sheets)
- 웹문서(HTML 문서)의 표현, 서식, 일관성 유지
- 명령어는 대소문자를 반드시 구분한다
- 종결 문자 ;
- 여러 줄 주석 /* */
- 속성 1개 주석 - -
CSS 용어
- 요소 element
- 속성 property, attribute
- 선택자 selector (관리를 잘해야 한다.)
- key, value, name
CSS Selector 선택자
선택자 {속성1:값1; 속성2:값2; 속성3:값3; ~~~ }
CSS 적용하는 방식
- Inline CSS : style="" 속성
- Internal CSS : <style></style> 태그
- External CSS : .css 스타일 파일
참고
https://www.w3schools.com/css/css_intro.asp
CSS Introduction
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
Inline CSS
코드가 깔끔하지 못할 수 있기 때문에 많이 사용하는 방법은 아니다.
부분적으로 필요할 때만 사용한다.
<h3>1) Inline CSS</h3>
<!-- style="속성:값; ~~" 속성 -->
<div style="width: 200px; height: 150px; background-color: red;"></div>
<div style="width: 100px; /*가로크기*/
height: 100px; /*세로크기*/
/*속성 한개 주석*/
--background-color: blue;"></div>
<hr>
<div style="width: 100%x; height: 100px; background-color: green;"></div>
<hr>
<div style="width: 50%; height: 100px; background-color: blueviolet;"></div>
<hr>
<!-- 참조 https://www.w3schools.com/css/css_background.asp -->
<!-- background 배경 관련 스타일 -->
<div style="width: 300px;
height: 300px;
background-image: url(../images/angel.png);
background-repeat: no-repeat;
background-position: right bottom;
background-size: 20% 20%; /*가로 세로*/">
</div>
<!-- 참조 https://www.w3schools.com/css/css_text.asp -->
<!-- 텍스트 관련 스타일 -->
<div style="width: 300px;
height: 300px;
background-color: yellow;
color: brown; /*글자색*/
text-decoration: underline; /*밑줄*/
text-indent: 50px; /*들여쓰기*/
text-shadow: 3px 2px blue; /*그림자 수평(3) 수직(2) 파랑*/
letter-spacing: -3px; /*글자간격*/
line-height: 20px; /*줄간격*/
word-spacing: 10px; /*단어간격*/">
웹 페이지 전체의 일관성을 유지할 수 있도록 스타일을 미리 저장해 둔 시트를 의미한
다. 웹 페이지를 HTML로만 작성할 경우에는 스타일 변경에 제약이 있으나, 스타일을
미리 저장해 두고 일부 내용의 스타일을 변경할 때 전체 페이지의 내용을 한꺼번에 처
리할 수 있어 간편하고 페이지의 일관성을 유지할 수 있다.
</div>
Internal CSS
<style> </style> 태그를 사용한다. 이 태그 안에는 css 문법만 사용한다.
선택자 Selector
- 스타일을 적용하기 위한 대상을 뜻하며, HTML 요소를 사용할 수도 있고 ID나 class 형태로 정의할 수도 있다.
- 선택자 {속성1:값1; 속성2:값2; 속성3:값3; ~~}
- 하나의 속성을 주석 --
선택자의 유형
- 태그 : HTML요소명을 선택자로 사용 가능. div, h1, input, body 등등
- # 선택자 이름 : 본문에 적용할 때 id="선택자 이름", 본문에 선택자 이름을 한 번만 적용할 수 있다.
- . 선택자 이름 : 본문에 적용할 때 class="선택자 이름", 본문에 선택자 이름을 여러 번 적용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>03_internal.html</title>
<style>
h1 {background-color: yellow; color: red;}
h2 {background-color: hotpink;}
input {border: 1px solid blue; /*선굵기 직선 선색상*/}
#mydiv {background-color: plum;}
.intro {background-color: orange;}
</style>
</head>
<body>
<h1>서울특별시</h1>
<h2>종로구</h2>
<h2>강남구</h2>
<h1>경기도</h1>
<h2>수원시</h2>
<h2>성남시</h2>
<hr>
<input type="text">
<input type="password">
<hr>
<div id="mydiv">무궁화 꽃이 피었습니다</div>
<div id="mydiv2">오징어 게임</div>
<hr>
<p class="intro">대한민국</p>
<p>오 필승 코리아</p>
<span class="intro">제주도</span>
<div class="intro">강남구 역삼동</div>
</body>
</html>id는 같은 값을 줄 수 있다. 동일한 id는 위에서부터 번호를 매기며 0부터 시작한다.
하지만 id를 동일하게 하면 헷갈리기 쉬워 가급적 다른 값을 주는 것이 좋다.
external css
css 파일을 만들어 작성한다. <style> 태그는 사용할 필요 없다.
@charset "utf-8";
/* 문자 인코딩 utf-8 */
/* 반드시 첫줄에 와야 한다 */
/* mystyle.css */
/* 참조 https://www.w3schools.com/cssref/css_selectors.asp */
* {
font-family: 궁서체;
font-size: 15px;
font-style: italic;
font-weight: bold;
} /* 모든 요소들*/css 파일을 <link>를 통해 html 문서에 연결시켜 준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>04_external.html</title>
<!-- .css 파일 import -->
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h3>External CSS</h3>
<!-- .css 스타일만 별도로 모아 놓은 파일 -->
무궁화 꽃이 피었습니다<br>
Gone With The Wind!!<br>
</body>
</html>
body {background-color: yellow;
margin: 0; /* 바깥쪽 여백. 위쪽 오른쪽 아래쪽 왼쪽 모두 여백을 0 */
padding: 0; /* 안쪽 여백 */
}
.line {border: 1px dotted gray;}
#mylayer {
width: 200px;
height: 200px;
background-color: aqua;
} <body>
...
<input type="text" class="line">
<hr>
<textarea class="line"></textarea>
<hr>
<div id="mylayer"></div>
</body>
다양한 Selector
@charset "utf-8";
/* mystyle05.css */
/* 참조 05_다양한selector.html */
/* 참조 https://www.w3schools.com/cssref/css_selectors.asp */
p { /* 모든 <p> 요소 */
font-family: 궁서체;
font-size: 40px;
font-weight: bold;
font-style: italic;
}<!DOCTYPE html>
<html lang="ko">
<head>
<title>05_다양한selector.html</title>
<link rel="stylesheet" href="mystyle05.css">
</head>
<body>
<h3>다양한 Selector 연습</h3>
<p>대한민국</p>
<div>
<p>오필승코리아</p>
</div>
<hr>
</body>
</html>
<P> 태그의 오필승코리아는 <div> 태그로 감싸져있다. 이때 <div>를 부모 태그, <p> 태그를 자식 태그라고 한다.
div p { /* <div>안에 있는 모든 <P> */
background-color: red;
}
h2, p { /* 모든 <h2>, <p> 요소 */
color: blue;
} <body>
<h3>다양한 Selector 연습</h3>
<p>대한민국</p>
<div>
<p>오필승코리아</p>
</div>
<hr>
<h1>종로구</h1>
<h2>무궁화</h2>
<div>
<h2>개나리</h2>
</div>
<hr>
</body>
/* 개나리에 글자 그림자 넣기 */
div h2 {
text-shadow: 2px 2px red;
}
<div>
<h2>개나리</h2>
<span>
<p>라일락</p>
</span>
</div>
라일락은 아래 스타일 코드의 적용을 받았다.
div p { /* <div>안에 있는 모든 <P> */
background-color: red;
}라일락은 <span>으로 감싸져 있지만, 그 위 <div>로 감싸져 있기도 하다. 위의 코드는 <div> 안에 있는 모든 <p>에 적용되기 때문에 라일락 역시 이 코드가 적용된다.
아래 코드 또한 마찬가지 방식으로 적용된다.
<div>
<h2>개나리</h2>
<span>
<p>라일락</p>
<h2>해바라기</h2>
</span>
</div>div h2 {
text-shadow: 2px 2px red;
}
/* 참조 https://www.w3schools.com/css/css_boxmodel.asp */
#mybox { /* Box Model*/
width: 320px;
padding: 10px; /* 내용의 안쪽 여백을 상하좌우 모두 10px */
border: 5px solid black;
margin: auto; /* 수평을 기준으로 가운데 정렬 */
} <body>
...
<div id="mybox">Box Model</div>
</body>
/* 부모 > 자식 */
div > span > p {
text-decoration-line: line-through;
text-decoration-color: yellow;
} <body>
...
<div>
<h2>개나리</h2>
<span>
<p>라일락</p>
<h2>해바라기</h2>
</span>
</div>
...
<div>
<span><p>진달래</p></span>
<div><p>봉선화</p></div>
</div>
</body>
/* 해바라기 접근 */
div > span > h2 {
color: hotpink;
} <body>
...
<div>
<h2>개나리</h2>
<span>
<p>라일락</p>
<h2>해바라기</h2>
</span>
</div>
#menu {
width: 100px;
height: 100px;
background: gray;
}
.hide { /* 다 0을 주면 화면에 표시되지 않는다 */
width: 0;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
}...
<div id="menu">
<ol class="hide">
<li>국어</li>
<li>영어</li>
<li>수학</li>
</ol>
</div>
</body>
'웹개발 교육 > CSS' 카테고리의 다른 글
| [6일] css (3) - display, 2D Transforms, 플래시 메뉴, <meta>, 미디어쿼리 (0) | 2022.08.02 |
|---|---|
| [5일] CSS (2) - 선택자 활용, 포지셔닝 (0) | 2022.08.01 |
