UI(User Interface)와 UX(User eXperience)
UX
- 유저 경험에 의한 디자인
- 직접 혹은 간접적으로 이용하면서 느끼는 반응을 생각하며 설계
- ex) 모바일화 → 오프라인 매장보다 편의성
UI
- 사용자가 사용할 인터페이스를 보여주는 단계(시각화)
CSS (Cascading Style Sheets)
CSS를 가져오기 위한 세 가지 방법
- <style> 태그 활용
- html 파일 내 header 태그 내에 style 태그를 정의해 활용
- <link>를 활용한 외부 참조
- <link> - 외부 문서를 연결시키는 태그
<link href=".css 경로" rel="stylesheet"> - inline 방식 - 각각의 태그마다 적용
- <div style="css 내용; ">
예제)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 첫 번째 방법: style 태그를 header에 삽입 -->
<style>
div{
color: blue;
}
</style>
<!-- 두 번째 방법: link 태그 활용해서 외부 .css 파일 참고 -->
<link href="./style.css" rel="stylesheet">
// style.css 파일 내용
p {
color: green;
}
</head>
<body>
<div>
BLUE COLOR
</div>
<!-- 세 번째 방법: style 속성 활용 inline 방식 -->
<h1 style="color:red;">
RED COLOR
</h1>
<p>
GREEN COLOR
</p>
</body>
CSS 선택자 적용 방식
<< download.png >>
- * : 전체 선택자
- 모든 태그에 적용
*{
color: #000;
}
- <태그명> : 유형 선택자
- 특정 태그에만 적용
div{
color: #000;
}
- class 선택자
- .은 class를 의미
- 여러 태그에서 class 이름을 중복으로 써도 됨 (예시의 class name은 font-wrapper)
<head>
<style>
.font-wrapper{
color: red;
}
</style>
</head>
<body>
<!-- div.font-wrapper -->
<div class="font-wrapper">
빨강
</div>
<div class="font-wrapper">
이것두 빨강
</div>
</body>- id 선택자
- #은 id를 의미
- class와 다르게, id는 unique하게 쓰여야 함 (중복 사용 불가능)
<head>
<style>
.font-wrapper{
color: blue;
}
</style>
</head>
<body>
<!-- div#asdf -->
<div id="asdf">
빨강
</div>
<!-- 아래는 위랑 id가 중복이라서 불가능 -->
<div id="asdf">
이것두 빨강
</div>
CSS 주요 속성
Font 관련
- color : 폰트의 색상 변경 시 사용
- font-size : 폰트의 크기 변경 시 사용
- text-align : 텍스트 정렬 용도
- left / center / right 활용
- font-weight : 폰트의 두께를 변경할 때 사용
- normal, bold, 100, 200, …
{ color: red; font-size: 30px; text-align : center; font-weight: bold; }
요소 자체 관련
- border : 테두리를 그릴 수 있는 css
- 문법 : 두께 종류 색상
- background-color : 요소의 배경색을 바꿈
- width, height : 너비, 높이 설정
{
border: 1px dotted black; // 1px 두께의, 점선, 검은색
width: 50% // 자신을 감싸고 있는 태그의 50%의 너비를 갖겠다
height: 40px; // 이 요소는 40px 높이를 갖겠다
}- border-radius : 각 테두리 별 꼭지점 부분을 둥글게 만듦
- 10% → 엣지 둥글게, 50% → 원형
{ border-radius: 10% // 위는 아래와 같다. // border-top-left-radius: 10%; // border-top-right-radius: 10%; // border-bottom-right-radius: 10%; // border-bottom-left-radius: 10%; } - margin : 바깥쪽 여백을 의미
{ margin: 10px; // 아래와 같은 의미 // margin-top: 10px; -> 위로부터 10px 떨어지게 배치 // margin-right: 10px; // margin-bottom: 10px; // margin-left: 10px; margin: 10px, 20px, 10px, 20px; -> 위, 오른쪽, 아래, 왼쪽; (시계방향) margin: 10px, 20px; -> 위/아래, 왼쪽/오른쪽; } <head> <style> .box{ border: 1px solid black; width: 120px; height: 120px; } /* auto는 자동으로 끝까지 민다고 생각하면 됨 */ .aa{ margin-left: auto; } .bb{ /* 위아래 0 왼쪽 오른쪽 auto -> 양쪽을 밀어 정렬한거임 */ margin:0 auto; } .cc{ margin-right: auto; } </style> </head> <body> <div class="box aa">aa</div> <div class="box bb">bb</div> <div class="box cc">cc</div> </body> - padding: 안쪽 여백을 의미
- margin과 표현법은 같다.
- 특정 CSS 요소들은 부모 태그로부터 상속을 받음
- ex) text-align, font-size, color 등
- %를 사용하면, 부모 태그의 너비와 높이에서 영향을 받음
- background-image: 배경 이미지를 설정하기 위한 옵션
- background-repeat: 배경이미지에 대한 반복 여부를 정하는 옵션 / default는 반복
- background-size
- auto(default) : 원래 크기에 맞게 배치 / h,w가 작아져도 이미지 크기 안 변함
- cover : 이미지가 배경을 가득 채우도록 진행 / h,w에 맞게 알아서 조절
- contain : 가장 긴 축에 맞춰서 이미지 가득 채움 / h가 크면 h에 맞게 이미지 크기 확대
<style>
.image-wrapper{
background-image: url(”이미지경로”);
background-repeat: no-repeat;
background-size: auto;
}
</style>
.
<div class="image-wrapper"></div>
- box-shadow : 해당 요소에 그림자 효과 추가
.box{
width: 40px;
height: 40px;
border: 1px solid black;
/* box-shadow 문법 : 수평 수직 흐림반경 확산거리 색 */
box-shadow: 12px 12px 12px 1px blue;
}
'IT_Study > Web' 카테고리의 다른 글
| JavaScript (2) : Java와 Javascript의 차이, 문자열 parsing, Arrow function, this 정리 (0) | 2023.02.07 |
|---|---|
| JavaScript (1) : 개요, 기본 문법, 호이스팅, 타입 변환 (0) | 2023.02.05 |
| HTML 기초 (4) - CSS display, position 이란? (0) | 2023.01.24 |
| HTML 기초 (2) - 시멘틱 웹(Semantic Web)이란? (0) | 2023.01.24 |
| HTML 기초 (1) - 태그란? (0) | 2023.01.24 |