css (1)
오늘도 어김없이 이렇게 시작!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>< h1 > 안쪽에 디자인 적용하는 방법
1)<head></head> 안쪽 <style></style> 사용
css 의 코드는 {중괄호 안쪽에 기입}
<style> h1 {color: red;} </style>- color는 css의 속성, 그에 대응하는 red는 속성값/ 입력 후에는 마침표로 (;)입력
/ 안하면 이후에 작성된 css가 적용 안됨 / 습관 들이기!
ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {color: red;}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
: 페이지에 빨간 글자 노출 * 2 태그 안에 style 이라는 속성을 추가해서 이 안에 다이렉트로 css 문법을 작성하는 방식
ex) <h1 style="background-color: pink;">Hello World</h1>
-> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {color: red;}
</style>
</head>
<body>
<h1 style="background-color: pink;">Hello World</h1>
</body>
</html>but 이 두가지 방식에는 치명적인 단점.
지금은 코드분량이 길지 않아서 문제가 되지 않지만,
만약 이 코드가 1000, 2000줄로 넘어갔다, 그럼 이 하나의
html 문서에 html언어와 css 언어가 같이 혼재되어 있다?
가독성이 많이 떨어짐, 유지 보수 불편
-> 다른 언어는 두개의 파일로 만들어서 연동하는 방식으로 작업
3) 두개파일을 연동방법
css파일을 html로 가져올때는 link 태그 사용
<link rel="stylesheet" type="text/css" href="">
link rel="styleshee" : 링크태그에 연동되는 파일
디자인을 담당하는 문서, 즉 stysheet다.
type="text/css" : 연동되는 언어는 css 로 구성되어있다.
href=""> : 연동될 파일의 경로를 "" 사이에 입력
ex) <link rel="stylesheet" type="text/css" href="style.css">
-> 적용하면 폰트사이즈 변경됨
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {color: red;}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="background-color: pink;">Hello World</h1>
</body>
</html>주의점 : 탭 중에서 한쪽만 저장한다고 해서 다른쪽까지 자동으로 저장되는건 아님.
양쪽 모두에 변경사항이 있다면 양쪽 모두 저장 해줘야 정상적으로 저장 됨.
실무에서는 링크태그로 많이 쓰임. 링크태그로 css 연습할것
필연적으로 html 태그는
부모 자식 형제관계 / 포함된 태그는 부모-자식 / 동급 관계 - 형제
**
• 상단 영역에만 글자 바꾸고 싶을 때
기존) header {color: red;}
h1 {color: blue;}
p{color: green;}
번경) header {color: red;}
header h1 {color: blue;}
header p {color: green;}
= 부모를 명시함으로써 디테일하게 설정 가능
쉼표 사용으로 보다 간단하고 편리하게
:
header {color: red;}
header h1,
footer h1 {color: blue;}
header p,
footer {color: green;}
선택자 : css에서 html 문서에 접근하는 방식
특정 영역에 접근하는 방법. 크게 4가지
1 type 선택자
ex) html : <h1>Hello World</h1>
css : h1 {color: red;}2 id 선택자
태그에 고유의 이름을 붙힐 수 있음
태그에 이름을 부여해서 디자인 적용
ex) html: <h2 id="text1">Nice to meet you</h2>
css : #test1{color: blue;} 3 class 선택자
태그에 별명 붙이는 것
html : <h3 class="test2">Welcome</h3>
css : .test2{color: green;}=같은 태그인데 서로 다른 색상을 적용하고 싶을 때
고유의 값을 지정하기 위해서 id와 class 사용
4 atribute 선택자 (속성 선택자)
html 의 타입의 속성값을 가지고 디자인을 적용하는 방법
html: <input type="password" placeholder="비밀번호">
css: input[type="text"] {border: solid 10px red;}
input[type="password"]{border: solid 10px blue;}id와 class 는 어떤 차이가 있는가?
1) class( 별명)은 한 사람당 여러개를 가질 수 있음.
속성값으로 여러개의 별명을 지을 수 있다. id(이름)은 하나
ex) html : <h3="bg-1">Class 선택자</h3>
<h3="bg-1 font-size-1">Class 선택자</h3>
css: .bg-1{background-color: red;}
.font-size01{font-soze: 50px;}2) id는 한개의 문서에 하나의 속성값이 있어야 한다.
html
<header id="intro">
<div class="container">
<h2>header h2</h2>
<p>header p</p>
</div>
</header>
<p>out p</p>
css
header h2{color: red;}
header p {color: blue;}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
html
<header id="intro">
<div class="container">
<h2>header h2</h2>
<p>header p</p>
</div>
</header>
<p>out p</p>
css
#intro h2{color: red;}
#intro .container p {color: blue;}
케스케이딩
: css 로 디자인할 때 어떤 디자인을 우선적으로 처리할지
우선순위에 영향을 미치는 개념
ex)
<h1>Hello World</h1>
h1 {color: red;}
h1 {color: blue;}
동일한 선택값에서는 나중에 입력한 값의 우선순위가 높음 -> blue
class와 id를 비교했을때에는 id의 우선순위가 더 높음.
ex)
<header> id="intro"
<div class="container">
<h1>header h1</h1>
</div>
</header>
#intro h1{color: blue;}
header h1{color: red;}
ex)
<header> id="intro"
<div class="container">
<h1>header h1</h1>
</div>
</header>
#intro .conatainer h1{color: pink;}
#intro div {color: green;}
#intro h1{color: blue;}
header h1{color: red;}케스케이딩-> 원본코드를 유지한 상태에서 새로운 css 코드를
추가하는 방식으로 디자인을 덮어씌울때 사용
> css 의 여러 속성
-공간을 만들때 쓰는 속성
width / height
단, css로 만들었을 때 투명으로 만들어져서 입문자가 어려움을 겪는데 이럴때
코드를 ex) html :
<div>
<h1>Nice</h1>
</div>
css :
div {with: 300px;
height: 300px;}
backtround-color: yellow;하게되면 배경화면 색으로 파악에 용이.
300px 은 고정값. 화면 크기를 바꿔도 변하지 않음
가변값을 주고싶을때? (브라우저 크기에 따라서 자연스럽게 리사이즈를 원할경우)
-> px이 아니라 % 사용
ex)
div {with: 100%;
height: 300px;}
backtround-color: yellow;주의) 가변값의 기준?
부모의 기준으로 ex) 300 값으로 측정
상한선 : max-width값 /테두리 설정
ex)
<div>
<h1></h1>
</div>
div {
with: 100%;
height: 300px;
min-width: 600px;
max-width: 800px;
border: solid 10px red;
background-color: yellow;모서리에 round로 할 경우 border-radius
: ex)
div {
with: 100%;
height: 300px;
min-width: 600px;
max-width: 800px;
border: 10px red solid;
border-radius: 50px;
background-color: yellow;}폰트설정 3가지 예시
font-size: 80px;
font-style: italic;
서체 font-family 복수의 폰트 서체 지정 가능
ex) font-family:Arial, Times, sans-serif ;}
동시에 적용되는 것이 아니라 앞에서부터 사용 가능한
폰트부터 우선순위로 적용 (a 라는 폰트가 적용이 안될 때 다음 폰트)
마지막은 sans-serif로 지정(모든 브라우저에서 사용 가능)
구글폰트로 css 적용하기
https://fonts.google.com/
구글 폰트 우측하단/ link tag 복사 후 html에 붙여넣기
(css 링크태그 바로 위에)
구글폰트 우측하단/ css rules to specify famliy 아래 tag 복사 후
font-family: 안에 복사
ex) font-family:font-family: 'Noto Sans KR', sans-serif ;}
폰트 굵기
font-weight: 100;} - 가장 얇게 = 100
숫자가 클수록 폰트 굵기 굵어짐
* text decoration : 글자에 밑줄 적용 할 때
1) text-decoration: line-through; = 글자 가운데 밑줄
2) text-decoration: underline; = 글자 아래 밑줄
* 메뉴태그 만들 때 밑줄 없게 만들고 싶을 경우
(a 태그 밑에 언더바 제거하고 싶을 때)
html :
<div>
<h1>Nice</h1>
<a href="#">네이버</a>
</div>
css :
a {text-decoration:none ;}
*글자 정렬 바꾸고 싶을 때
text-align: left; (왼쪽정렬)
text-align: right; (오른쪽끝정렬)
text-align: center; (가운데정렬)
주의점: 텍스트 움직이는 범위는 h1 태그의 영역 안에서 움직임
list style
html:
<div>
<h1>Nice</h1>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</div>
css:
ul{list-style: none;}-> 메뉴 앞 기호 삭제
- opacity :** 투명도에 영향 미치는 속성
1이면 완벽히 불투명, 0이면 투명, 0.5는 불투명
ex) div 태그 안쪽에 opacity: 0.5;}
- 백그라운드 속성
배경색상 넣을 때 background-color: yellow;
배경이미지 넣을때 background-image: url();
(괄호안에 이미지 경로)
icon.png
background-repeat: repeat-x;
x축으로만 반복효과
background-repeat: repeat-y;
y축으로만 반복효과
background-repeat: repeat;
모든
background-repeat: no-repeat;
반복 x
**
-
이미지 위치 바꿀때**
background-position: top/bottom/left/right/center;
top left; / right bottom; 등등 .... -
imag tag, background image 차이점
: 1) background image 는 100x100이라고 하는 액자 틀에
이미지를 사용해서 끼워넣는 것. 액자 틀 보다 사진이 큰 경우에
액자에 잘려서 나오게되고 액자가 이미지보다 크면 여백이 생기게 되는... 크기가 동일하면 딱 맞아 들어가는 것으로 생각
이러한 특징을 알고 사용할 것
2) 로고는 데코일까 정보담고있는 이미지일까?
로고는 아이콘. 서비스의 디자인을 의미하므로 정보성을 담고있음
정보를 갖고 있는 이미지는 img 태그로 해주는 것이 정확
ex) alt="네이버 로고" 이것은 접근성의 문제
사용하는 이미지의 성격에 따라
데코 용도면 background, 정보성이라면 img로 구분하여 사용
> 6월을 마무리하며
어느덧 한 해의 반을 지나왔다. 대학에 입학한 스무살때부터 온갖 인생 걱정은 다 하면서 졸업을 했고 어느덧 26살이 되었다. 일찍이부터 더 큰 것들을 해내어 기여하고 싶은 원대한 꿈에, 경영대 수업을 들으면서 사업아이템을 구상했고, 당시에는 감사하게도 우수 아이템에 선정이 되어 실리콘벨리 초청 피칭세션도 가졌지만, 사실 인적자원이 부족할 20대 초반의 나이에 아이템만으로 뭔갈 한다는건 불가능에 가까웠다고 생각한다. 당시엔 항상 경험만 쌓고 아무것도 도출하지 못하는 나의 존재란 뭘까 우울했던 나날들이였다. 부모님은 그 좋은 나이에 할 수 있는 것들을 놓친다고 안타까워하셨지만 나로썬 할 수 있는 최선이였다.
어느덧 시간이 흘러 좋은 기회에 함께하게 되었고, 이렇게 공부할 수 있음에 감사하다. 정말 나는 아무것도 모르는데 할 수 있을까 걱정도 있었지만, 어느덧 한달이라는 시간이 지나 월말평가를 보는 날도 왔도 왔구나! 사실 아직은 특정 어떤 부분이 어렵다기보단 배워가기 급급한데, 이것 또한 감사한 마음으로 하루하루를 보낸다. 성실히 쌓여진 몇개월 뒤의 내가 지난 날을 되돌아 봤을때, 그래도 나 성실한 모습으로 열심히 해왔구나 생각 들 수 있도록 후회없이 잘 하고싶다. 오늘도 감사합니다. :)
