web 기초/css()

Algo rhythm·2022년 5월 27일

css

element

selector

class

name

디자인을 위한 스타일 입력방식 3가지

web 기초

목록 보기

4/15

css

디자인에 최적화된 웹페이지 마크업 언어
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics 참조

element

웹디자인의 최소 단위
하나의 객체를 의미
태그 하나를 지칭한다고 하고 대충 넘어가자

selector

css 혹은 javascript로 변화시킬 대상(데이터)을 지정할 때 부른다
하나 이상의 엘리먼트일 수 있다
선택할 땐 tag, class, name, id를 이용

class

다른 개발언어보다 html에서 한정적인 역할을 수행
부서 개념으로 이해

id

단 하나의 element, 중복 불가

name

클래스보다 소수의 하지만 단수 일수도 복수 일수도 있는 단위

디자인을 위한 스타일 입력방식 3가지

1. 인라인 추가 방식(비추)

<div style="background-color: blue;">인라인 css</div>

직접 스타일을 하나하나 지정해주는 방식

2. 내부 선언 방식(보통)

<body>
	<style>
      /* 내부 선언 방식 */
      div {
        /* div 태그의 기본 스타일을 설정 */
        width: 100px;
        background-color: yellow;
        font-size: 30px;
      }
	</style>
</body>

body 태그 안에 div에 대한 기본 값을 설정 가능
해당 페이지에서만 사용 가능

3. 외부 선언 방식(추천)

3-1. 파일 불러오기

<head>
	<link rel="stylesheet" href="style.css">
</head>

스타일 양식을 저장해둔 파일을 불러온다

3-2. 확장자가 css인 파일을 생성하고 엘리먼트를 입력

/* 외부에서 스타일을 설정한 파일을 만들고 그 파일을 불러와서 적용 가능 */
div {
  background-color: aqua;
  height: 300px; /*  */
  text-align: center; /* 문장을 중앙정렬 하는 엘리먼트 생성 */  
  text-transform: uppercase; /* 문자의 대문자화 */  
  text-transform: lowercase; /* 문자의 소문자화 */  
}

body {
  background-color: hotpink;
  font-family: 'Noto Sans KR', sans-serif;
}

p {
  color: blue;
}

/* . : 클래스라는 의미 */
.red-text {
  color: red;
}

.yellow-text{
  color: yellow;
}

.big-size{
  font-size: 50px;
}

.border{
  border-style: dashed;
  border-style: 1px;
}
  {
  text-align: center;
}

/* # : id를 지정하여 속성을 바꾸는 방법 */
/* id는 유일해서 반복사용이 불가능하니 자주 사용 안하는 방법 */
#div1{
  background-color: aquamarine;
}

/* text-decoration: none => 모든 장식을 제거 */
a{
  text-decoration: none;
  color: grey;
}

a:hover{
  color: darkgoldenrod;
}

text-decoration 선으로 텍스트를 꾸밀 수 있게 해주는 속성
-- none: 선을 만들지 않음 ex) text-decoration:none;
-- line-through: 글자 중간에 선을 만듦 ex) text-decoration:line-through;
-- overline: 글자 위에 선을 만듦 ex) text-decoration:overline;
-- underline: 글자 아래에 선을 만듦 ex) text-decoration:underline;

font-family 사용할 글꼴들을 모아놓고 필요할 때마다 불러서 사용
-- family-name: 글꼴이름
-- generic family: 모양이 비슷한 글꼴들의 그룹
-- ex)

<style type="text/css">
h1, p{font-family: "Love Ya Like A Sister", cursive;}
/*cursive : 필기체 계열로 대체
"Love Ya Like A Sister" 라는 폰트가 없을 때 */
</style>

font-style 글자의 모양을 정하는 속성, 기울임 여부
-- normal: 기본, 보통
-- italic: 기울임
-- oblique: 기울임
font-size 글자의 크기를 조정
line-height 문장 간의 높낮이를 조절

3-3. 클래스의 엘리먼트 활용

<span class="red-text">span 태그</span>

<!-- 외부선언의 엘리먼트 선언, 속성을 2개 이상 적용할 땐 띄어쓰기 -->
<span class="yellow-text big-size">span 태그 2</span>
<span class="big-size">span 태그 3</span>

<!-- 이 페이지 안에서 id는 하나씩만, 중복 불가 -->
<div id="div1">
	div1의 영역
</div>

<a href="#">링크</a><br>
<a href="http://www.naver.com">링크2</a>