반응형

1. box model 


2. margin, padding

    • margin : 요소 주위의 여백 = 테두리 밖의 공간
    • padding: 내용과 테두리 사이의 여유공간
A. padding 주는 방법
-> 직관적인 방법 : 

1
2
3
4
5
6
7
p {
  border: 1px solid blue;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-left: 120px;
  padding-right: 60px;
}
cs

-> 한줄에 쓰는 방법  : 위(padding-top) 부터 시계 방향으로 하나씩 쓰면 됨

1
2
3
p {
  padding: 위 오른쪽 아래 왼쪽;
}
cs



-> 위, 아래, 오른쪽, 왼쪽 이 다 같은 경우 : 

1
2
3
4
p {
  border: 1px solid blue;
  padding: 50px;
}
cs

-> 위 = 아래 / 왼쪽 = 오른쪽 :

1
2
3
4
p {
  border: 1px solid blue;
  padding: 50px 100px;
}
cs

B. margin 주는 방법

-> 가장 직관적인 방법:

1
2
3
4
5
6
7
8
p {
  border: 1px solid blue;
  margin-top: 50px;
  margin-bottom: 40px;
  margin-left: 200px;
  margin-right: 60px;
}
 
cs

-> 한 줄에 

1
2
3
p {
  margin: 위 오른쪽 아래 왼쪽;
}
cs

-> 위, 아래 , 왼쪽, 오른쪽이 다 같은 경우

1
2
3
p {
  margin: 50px;
}
cs

-> 위 = 아래 / 왼쪽 = 오른쪽 :

1
2
3
p {
  margin: 50px 70px;
}
cs


C. 가운데 정렬 : 오른쪽 , 왼쪽 margin 값을 auto로 설정

1
2
3
4
5
6
p {
  border: 1px solid blue;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
cs



3. width, height

=> width와 height을 통해 가로 길이, 세로 길이를 설정

=> 이미지도 css에서 설정 가능 


A. 최소(min-width), 최대 가로(max-width) 길이 설정 가능

1
2
3
4
5
6
7
8
9
.p2 {
  border: 1px solid red;
  max-width: 200px;
}
.p3 {
  border: 1px solid blue;
  min-width: 2000px;
}
cs

B. 최소(min-height), 최대 세로(max-height) 길이 설정 가능

1
2
3
4
5
6
7
8
9
10
.p2 {
  border: 1px solid red;
  min-height: 200px;
}
.p3 {
  border: 1px solid blue;
  max-height: 1000px;
}
 
cs



4. overflow : width, height, max-width, max-height 설정 시 내용물이 들어갈 공간이 부족 할 때 사용

A. visible : 넘쳐나는 내용물 그대로 보임 = 기본값

B. hidden : 넘쳐나는 내용 아예 숨김

C. scroll : 내용물을 숨겼다가 사용자가 스크롤하면 볼 수 있게 함

D. auto : scroll과 거의 똑같지만 차이점 있음 / 

       scroll : 항상 스크롤바를 보여줌, auto : 내용물이 넘쳐날 때만 스크롤바 보여줌


5. border

A. 한줄에 끝내기 : 

1
2
3
4
5
6
7
8
9
10
11
12
.p1 {
  border: 2px solid #4d9fff;
}
.p2 {
  border: 2px dotted #4d9fff;
}
.p3 {
  border: 2px dashed #4d9fff;
}
cs

B. 명확하게 나누기 : 속성 사용하여 테두리 스타일 하나씩 지정

1
2
3
4
5
.p1 {
  border-style: dotted;
  border-color: red;
  border-width: 5px;
}
cs

C. 다채로운 테두리 : 

1
2
3
4
5
6
.p1 {
  border-top: 3px dotted #4d9fff;
  border-bottom: 2px dashed red;
  border-left: 5px solid green;
}
 
cs

D. 테두리 없애기 (기본값 설정되있기 때문에 없애주면 됨)

1
2
3
4
.p{
    border: none;
    border: 0;
}
cs


반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
4. text 스타일링  (0) 2019.02.27
2. class & id & div  (0) 2019.02.27
1.HTML & CSS 기본 태그  (0) 2019.02.27
반응형

1. 텍스트 색 지정 방법(color 속성 사용)

  • 색 이름 : CSS에서 정해진 색 이름 사용 (https://www.w3schools.com/cssref/css_colors.asp)
  • RGB : R(red) , G(green), B(blue) 사용 (https://htmlcolorcodes.com/color-picker)
  • HEX 값 (16진법)

    

 2. 텍스트 스타일링 (CSS 속성)

  • font-weight : 글자 굵게 (400: 보통 / 700 : <b> 태그와 같은 효과 / 100단위로 사용하기 때문에 없는 값 입력 시 기본 굵기
    /브라우저에 따라 굵기가 다르게 나옴):
  • text-align: 정렬 /left, right, center 사용 /이동
  • under-line : 밑줄
  • text-decoration : over-line(글 위에 줄) /line-through(글자 가운데 줄 긋기)/none(<a태그> 많이 사용, 데코효과 없앰)

3. 가운데 정렬 

  • text-align : center; 사용
  • <a태그> 가운데 정렬 X =><div>를 사용하여 내용물을 감싸주면 정렬 가능 

4. 폰트 크기 설정

  • Absolute(절대적) : px / pt(px*1.3)
  • Relative(상대적) : em / %

5. line-height

  • 줄 간격 조절 역할 
  • 각 줄이 실질적 공간을 정해줄 수 있음 (content area +- a)

6. font 설정

  • 종류 : serif (궁서체) / sans-serif(굴림체) / monospace(courier)/cursive(필기체)/fantasy
  • css -> font-family : "폰트 종류";로 사용 
  • 구글 폰트 사용법 
    -> fonts.google.com => 폰트 설치 => link 태그 복사 => <head> 내 삽입 => css에 font-family 사용
  • 한글 폰트 
    -> fonts.google.com/earlyaccess => cltr + f (korean) => 주소 복사, css에 삽입 

  • 폰트 저장해서 사용
    다운-> style.css생성 -> src 항상 파일 위치 기반으로 설정후 삽입 

1
2
3
4
5
6
7
8
@font-face{
    src: url("../fonts/BMJUA_otf.oft");
    font-family: "Jua";
}
p{
    font-family:"Jua";
}
 
cs

7.span 태그 

  • div & span 공통점 : 요소를 한 묶음으로 만들어줌
  • 차이점 : span(원래 있던 글에 영향을 주지 않음) /div(한 줄 떼고 생성)


반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03
2. class & id & div  (0) 2019.02.27
1.HTML & CSS 기본 태그  (0) 2019.02.27
반응형

1. class & id

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<<html>
<head>
    <title>id/class</title>
    <meta charset="utf-8">
    <style>
        .big-blue-text{ /*class 변경 시 "."*/
            font-size : 64px;
            color: blue;
        }
        .centered-text{
            text-align: center;
        }
        #best-text{ /*id 변경 시 "#"*/
            color: orange;
        }
    </style>
</head>
<body>
    <h1 class="centered-text">heading 1</h1>
    <h2>heading 2</h2>
    <p class="big-blue-text centered-text">첫번째 문단</p>
    <p id="best-text">두번째 문단</p>
    <p>세번째 문단</p>
</body>
</html>
=> class 두 가지 이상 적용 시 사이에 엔터 삽입
=> 스타일 선택자에 class 많이 들어가는 경우 갯수에 따라 스타일의 우선순위 달라져서 주의해서 사용해야함(가급적 지양)
=> 단순한 독립성 , 우선순위 위해서는 -> id값 , inline스타일 
=> class 이름 : 셀렉터 우선 , 일관적 작성
=> & : 부모 참조 선택자
=> Class(중복 클래스 가능/여러 클래스 가능/여러 요소 스타일링하고 싶을 때) 
vs Id(중복 아이디 불가/하나의 아이디만 가능/한 요소만 스타일링 하고 싶을 때)
 
 cs

2. div

=> 별다른 기능이 없는 block(어떤 'block' 요소든 특별한 설정 없이는 독단적인 줄에 있으려고 하는 성향 존재)


3. css 파일 따로 쓰기 & link 연결

1
2
3
4
##순서 
    .css 파일 생성 -> html 파일에서 style태그 복사 붙여넣기 
    -> <head> 태그 안에 link 연결 (<link href="폴더/파일명" rel(relationship)="stylesheet")

cs


4. css 방식

1
2
3
4
5
6
7
8
A.사용법
        a. 외부css사용하여 링크로 연결
        b. html 내부에 <style>태그 사용
B. 외부 CSS 사용을 권장 / 여러 파일에 중복 코드 제거에 좋음
C. 외부 CSS 파일을 사용하되 , 태그 자체에 style넣어 css 변경 가능(style 속성)
        => ex)<h1 style="color:red; font-size: 72px;">css</h1> 
 
cs



반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03
4. text 스타일링  (0) 2019.02.27
1.HTML & CSS 기본 태그  (0) 2019.02.27
반응형

1.HTML 기본 태그

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html> <!-- html 5 사용시 적용 -->
<title>My First Website</title> <!-- <title> : 페이지의 제목/브라우저 탭, 방문 기록 제목 -->
<meta charset="utf-8"> <!-- 한글파일 깨질 시 사용  -->
<h1>My First Page</h1>
<h2>I love HTML!</h2> <!-- <h1>~<h6> : heading[n] / 머리말 / h1부터 순서대로 작아짐 -->
<p>Lorem ipsum dolor sitempor incididunt ut labore et dolore magna aliqua.</p>
<!-- <p> : paragraph / 기본 위, 아래 여백 존재 -->
#시각적 html 태그
Hello <b>World</b>! <!-- <b> : bold /텍스트 굵게 -->
Hello <i>World</i>! <!-- <i> : italics / 텍스트 기울게 -->
#Phrase Tags 태그 (시각 + 의미 )
Hello <strong>World</strong>! <!-- <strong> : 텍스트 굵게 + 태그 텍스트 중요  -->
Hello <em>World</em>! <!--  <em> : 텍스트 기울게 + 태그 텍스트 강조 -->
cs

2. CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<<기본 형식>>
<!--여기에 html 코드 -->
<style>
/* 여기에 css 코드 */
</style>
<<예시>>
<h2>Heading 2</h2>
<style>
h2 {
    font-size: 72px; /*px : 폰트 크기 단위*/
    text-align: right; /*text-align : 글 왼쪽, 가운데, 오른쪽 정렬*/
    color: hotpink; /*color : 텍스트 색 지정*/
    margin-bottom: 80px; /*margin  : 요소 사이 여백 설정 / 여백 크기 : px*/
    margin-left: 50px;
}
</style>
 
cs

3. head, body , html 
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<<html>
<head> <!-- 제목, css, js등 내용 외적인 부분 삽입 -->
    <title></title>
</head>
<body>
<!-- 내용적인 부분 -->
</body>
</html> <!-- 이 안에있는 모든 것이 html이다  -->
=>옵셔널 태그라 불리는 <html> , <head>, <body> 는 의견이 분분함
=>굳이 안써도 되지만 파일의 구조가 눈에 더 잘 들어옴
 
cs


4.  링크 :하이퍼링크(Anchor) -> <a>태그

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
##링크나 이미지 모두 수정하고 있는 현재 html의 위치에 따라 주소 변경 
하이퍼링크(Anchor) -> <a>태그
#외부 사이트 이동
<a href(속성) = "가고싶은 주소(속성값)" target="_blank" (새로운 탭에서 열림)>내용</a>
#내부 사이트 이동
<a href="folder1/page2.html">page2</a> <!-- 같은 폴더 내 html 이동 -->
<a href="../index.html">page3</a> <!-- 상위폴더 html 이동 -->
이미지 : <img> 태그
<img src="사진 주소" width(너비)="300" height(높이)="300">
<img src="images/ice_cream.jpg"><!-- 같은 폴더 내 이미지 사용 시 주소 지정 -->
<img src="../images/ice_cream.jpg"><!-- 상위 폴더 내 이미지 사용 -->
##이미지 가운데 정렬 방법
<style>
    img{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>
 
cs

5. 사이즈 설정

##폰트 크기 px : 폰트의 세로 길이

##퍼센트 % : 길이 설정 (총 브라우저 크기에 배율 맞춤)


반응형
저작자표시 변경금지 (새창열림)

'Web > HTML & CSS' 카테고리의 다른 글

6. CSS 활용  (0) 2019.03.12
5. BOX Model -(2)  (0) 2019.03.12
5. BOX Model -(1)  (0) 2019.03.03
4. text 스타일링  (0) 2019.02.27
2. class & id & div  (0) 2019.02.27

+ Recent posts

티스토리툴바