스타일시트 집중적으로 공부
프리모아
▶1103-008
<!DOCTYPE html>
<html lang="ko">
<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>CSS</title>
<style>
p {
font-size: 36px;
color: #ff0000;
font-family: Arial, Helvetica, sans-serif;
/* 폰트가 없을 경우 대비하여 서브폰트 3개나 지원준비 */
/* text-decoration: line-through; */
background: yellow;
font-weight: 800;
/* 일반 굵기의 서체가 400, 볼드 600, 서체 따라 굵기가 여러 가지 */
/* border-width: 10px;
border-style: solid;
border-color: black; */
border: 20px solid gray;
text-shadow: 4px 4px 5px green;
/* x축 이동거리 y축 이동거리 블러량, 0일땐 단위값을 쓰지 않음*/
box-shadow: 4px 4px 5px orange;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium harum, soluta consequatur dignissimos nemo nisi. Mollitia nobis natus animi vitae nisi officiis obcaecati unde hic. Officiis enim quas quo eum.</p>오늘은 즐거운 금요일
</body>
</html>
-블록 ul, li, p, form, ol, h, table / 인라인 태그 복습
-블록은 width와 height를 가짐-> br은 그런 의미에서 아닐듯
*border의 형태: solid(실선) dashed(절취선 같은..) dotted(점선)
(두꺼운 액자같은 형태) inset outset ridge groove 등등
- x축 y축 블러량 컬러 순서
▶1103-008(1)
<!DOCTYPE html>
<html lang="ko">
<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>CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p style="color: purple">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium harum, soluta consequatur dignissimos nemo nisi. Mollitia nobis natus animi vitae nisi officiis obcaecati unde hic. Officiis enim quas quo eum.</p>오늘은 즐거운 금요일
<!-- 인라인 스타일 시트 적는 방법 / 우선순위 기억 -->
</body>
</html>
-외부 스타일 시트보다 인라인 스타일 시트가 우선해서 글씨가 보라색이 됨
<스타일 시트 우선 순위>
0. !important : 스타일시트 우선순위 0번
1. 인라인 스타일 시트
2. 내부 스타일 시트
3. 외부 스타일 시트
*스타일 시트는 외부에서 작업하는 것이 훨씬 용이함
▶1104-001
<!DOCTYPE html>
<html lang="ko">
<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>즐거운 금요일</title>
<script src="https://kit.fontawesome.com/747a5fc553.js" crossorigin="anonymous"></script>
<style>
body{
height: 10000px;
}
.cls01 {
width: 150px;
height: 150px;
border: 2px solid red;
border-radius: 35px 45px 40px 25px;
/* 모서리가 시계방향으로 둥글어짐 */
}
.circle {
width: 45px;
height: 45px;
border: 2px solid dodgerblue;
border-radius: 50%;
position: fixed;
right: 50px;
bottom: 50px;
}
i{
font-size: 36px;
}
</style>
</head>
<body>
<h1 class="cls01"><a href="#ss01">반품정책</a></h1>
<h1 class="cls01"><a href="#ss02">교환정책</a></h1>
<h1 class="cls01"><a href="#ss03">환불정책</a></h1>
<h1 class="cls01"><a href="#ss04">회원탈퇴</a></h1>
<!-- id를 #으로 표현 -->
<p id="ss01">반품정책 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque natus praesentium repellat facilis earum corporis corrupti explicabo aliquam. Quam ullam odio reprehenderit earum quod molestiae. Ipsum saepe ratione laboriosam voluptas! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis placeat quae porro voluptates? Culpa earum dicta ad saepe alias libero sed adipisci excepturi minus expedita sit aliquam, illum incidunt officia!</p>
<p id="ss02">교환정책 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque natus praesentium repellat facilis earum corporis corrupti explicabo aliquam. Quam ullam odio reprehenderit earum quod molestiae. Ipsum saepe ratione laboriosam voluptas! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis placeat quae porro voluptates? Culpa earum dicta ad saepe alias libero sed adipisci excepturi minus expedita sit aliquam, illum incidunt officia!</p>
<p id="ss03">환불정책 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque natus praesentium repellat facilis earum corporis corrupti explicabo aliquam. Quam ullam odio reprehenderit earum quod molestiae. Ipsum saepe ratione laboriosam voluptas! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis placeat quae porro voluptates? Culpa earum dicta ad saepe alias libero sed adipisci excepturi minus expedita sit aliquam, illum incidunt officia!</p>
<p id="ss04">회원탈퇴 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque natus praesentium repellat facilis earum corporis corrupti explicabo aliquam. Quam ullam odio reprehenderit earum quod molestiae. Ipsum saepe ratione laboriosam voluptas! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis placeat quae porro voluptates? Culpa earum dicta ad saepe alias libero sed adipisci excepturi minus expedita sit aliquam, illum incidunt officia!</p>
<div class="circle"><i class="fa-brands fa-apple"></i></div>
</body>
</html>
-링크를 누르면 아래의 글 위치로 이동함.
-border-raidius는 시계방향으로 둥글해짐, 꼭짓점 좌상->우상->우하->좌하 순서
<스타일시트에서 넘어야 하는 벽>
1. 포지션 position
2. 디스플레이 display
3. :before, :after 가상요소
<선택자의 종류>
1. 태그 선택자
2. 아이디 선택자(#): 딱 한번만 적용시킬 때 사용
3. 클래스 선택자(.): 똑같은 부분이 여러 곳일 때 사용
*딩뱃폰트: 타이핑을 하면 도형이 입력이 됨
-폰트어썸: 무료 가입후 코드 스니펫 복사하여 넣기
-하단 딩뱃폰트 삽입, 폰트기 때문에 크기를 키우고 싶으면 font-size 이용
.circle {
width: 45px;
height: 45px;
border: 2px solid dodgerblue;
border-radius: 50%;
position: fixed;
right: 50px;
bottom: 50px;
}
i{
font-size: 36px;
color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
-기준이 된 원 안의 정중앙에 사과가 들어옴
▶1104-002
<!DOCTYPE html>
<html lang="ko">
<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>아이디 선택자 사용법</title>
<style>
#wrapper {
width: 1200px;
height: 100vh;
margin: 0 auto;
border: 1px solid black;
/* background: url(김태리.jpg) no-repeat; */
/* background-size: contain; */
}
a:link {
width: 50px;
height: 50px;
border: 2px solid red;
padding: 5px;
display: inline-block;
/* a태그의 디스플레이를 바꿔버림 */
margin: 10;
text-decoration: none;
}
a:visited {
color: orange;
/* 일단 한 번 이상 방문했던 링크부분 */
}
a:hover {
text-decoration: underline;
/* 마우스를 오버했을 때 반응 */
}
a:active {
color: red;
/* 링크를 클릭하는 순간 */
}
</style>
</head>
<body>
<div id="wrapper">
<a href="#">링크1</a>
</div>
<!-- 공간, 영역을 만들기 위한 대표적인 블록 태그 -->
</body>
</html>
-감싸는 영역 지칭(자주 쓰는 용어): wrap, wrapper, container
<display의 종류>
1. inline 태그: width, height를 가지지 못한다. 여백은 가질 수 있다.
2. block
3. inline-block: 한 줄에서 옆으로 표시됨
4. flex
https://www.daleseo.com/css-display-inline-block/
CSS의 display 속성: inline, block, inline-block
Engineering Blog by Dale Seo
www.daleseo.com
https://velog.io/@shin6403/CSS-inline-inline-block-block-%EB%9E%80
CSS inline, inline-block, block 란?
대부분의 HTML element는 block 이다.block 속성은 inline과는 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지한다. 예를 들어, header, footer, p, li, table, div, h1 등이 모두 block 요소에 해당하는
velog.io
<여백>
*padding: 안쪽으로의 여백
*margin: 바깥쪽으로의 여백
-> 시계방향(상우하좌)
<background 배경 이미지 나열 방식>
-cover
-contain
[CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background)
프롤로그 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있습니다. 사용자가 이미지를 등록하는 경우 또는 마케팅 팀이 아무 이미지나 넣는
nykim.work
<a태그에 적용하는 순서>
link->visited->hover->active
https://devjhs.tistory.com/654
[css3] 가상 클래스 - :link , :visited , :hover , :active , :focus
1. 개념 가상 클래스 - :link , :visited , :hover , :active , :focus 어떠한 요소를 클릭하거나 마우스 커서를 올리거나 내리기와 같이 특정한 동작이 이루어질 때 스타일이 바뀌도록 만들어 주는 것을 가상
devjhs.tistory.com
https://chocoball3.tistory.com/49
css a 태그 링크 (link,visited,hover,active) 사용 방법
HTML에서 해당 페이지에서 다른 특정 페이지를 호출할 때 기본적으로 a태그를 이용합니다.a태그는 링크의 기능을 가지고 있는 태그이며, 많은 웹페이지에서 사용되고 있습니다.해당 태그를 사용
chocoball3.tistory.com
▶1104-003
<margin>
margin: 0 auto
*0 auto 0 auto 의 줄임말 --> 가운데 정렬
0
0 0 0 0 의 줄임말
0 10px 0 세 개만 적으면?
0 10px 0 10px의 준말
box-sizing: border-box라는 속성을 써서 width 안에 padding과 border를 포함해서 계산하기 쉽게 해서 레이아웃을 잡는 것.
ex)
width 100px
height 80px
padding 20px
border 8px
전체폭은 156픽셀 / 양쪽을 따져야 하므로
<가상 요소>
https://abcdqbbq.tistory.com/15
가상 클래스 vs 가상 요소
css를 배우고 실무에서 사용하다 보면 가상 클래스와 가상 요소 선택자라는 단어를 많이 들어볼 것이다. 실제로 두 선택자의 차이를 구분하지 못하고 두루뭉술하게 아는 경우가 많다. 그래서 가
abcdqbbq.tistory.com
(아주 잘 설명해주셨는데 왜 안나오지..!)
[css] 가상 클래스(pseudo-class)와 가상 요소 선택자 (pseudo-element)
가상 선택자CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사
mber.tistory.com
*둘이 헷갈리니 개념을 잘 기억해둘 것!
-콜론 두개 쓰는 것과 한 개 사이의 차이점이 궁금했는데 구분하려고 편의상 쓰는 것 같다.
*odd 는 홀수 = 2n+1 / 짝수는 even = 2n+2
*모든 프로그래밍에서 n은 0부터 시작한다.
<브라우저의 종류>
크롬, 사파리, 파이어폭스, 오페라(유럽형 브라우저)
<브라우저 접두사, 벤더 프리픽스, 프리픽스>
-webkit-크롬 사파리
-o-오페라
-moz-파이어폭스
-> 얘네를 써주지 않으면 안먹을 수 있음
http://www.tcpschool.com/css/css3_module_vendorPrefix
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
1. 최신모던브라우저
2. 모던브라우저
3. 구형브라우저(익스플로러)
*vh란?
=viewpoint height
화면의 높이에 맞추는 것
https://velog.io/@milkyway/CSS-%EB%8B%A8%EC%9C%84-%EB%B9%84%EA%B5%90-vh-vw-em-rem
CSS 단위 비교 (%, vh, vw, em, rem)
상황에 따라 역동적 특성을 부여하는 CSS 단위
velog.io
https://programming119.tistory.com/93
[CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이
vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다. 100vh, 100vw 가 전체 화면의 기준이 됩니다. 예를들어, 현재 스크린 크기가 height = 1000p
programming119.tistory.com
▶1104-004
<포지션 position 속성>
1. fixed
2. absolute
3. relative
4. absolute
<레이아웃을 흐트러뜨리지 않는 법>
>>부모요소나 조상요소 중에서 relative를 가지고 있고, 그의 자식요소나 손자요소가 absolute의 포지션 속성을 가지고 있다면 해당 absolute요소의 기준값은 브라우저가 아니고 relative가 기준값이 된다.
-fixed도 relative처럼 absoulte의 기준값이 될 수 있다.
CSS 포지션 속성 설명: absolute, fixed, relative 차이 설명 ✔️
CSS 포지션(postion) 속성은 요소를 문서의 특정 위치에 배치할 때 사용합니다. 요소의 최종 위치는 포지션의 top, right, bottom, left 값에 따라 결정됩니다. static: 일반적인 흐름을 따라 요소를 배치하
oneroomtable.tistory.com
<!DOCTYPE html>
<html lang="ko">
<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>포지션</title>
<style>
#wrapper {
width: 600px;
height: 600px;
border: 2px solid black;
position: relative;
margin: 50px auto;
}
.box1 {
background: red;
position: absolute;
top: 0;
left: 0;
}
.box2 {
background: orange;
position: absolute;
top: 0;
right: 0;
}
.box3 {
background: yellow;
position: absolute;
bottom: 0;
left: 0;
}
.box4 {
background: green;
position: absolute;
bottom: 0;
right: 0;
}
.box5 {
background: blue;
position: absolute;
top: 250px;
left: 250px;
}
.cls002{
width: 50px;
height: 50px;
}
/* 공통되는 값을 클래스를 동시에 적용하는 방법 */
</style>
</head>
<body>
<div id="wrapper">
<div class="box1 cls002"></div>
<div class="box2 cls002"></div>
<div class="box3 cls002"></div>
<div class="box4 cls002"></div>
<div class="box5 cls002"></div>
</div>
</body>
</html>
▶1104-005
<그레디언트>
circle 원형 ellipse 타원형
<!DOCTYPE html>
<html lang="en">
<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>그레디언트</title>
<style>
#box {
width: 400px;
height: 400px;
border: 1px solid black;
margin: 50px auto;
background: repeating-radial-gradient(circle, red 0px, red 20px, yellow 20px, yellow 40px);
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
deg 각도
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients
CSS 그레이디언트 사용하기 - CSS: Cascading Style Sheets | MDN
CSS 그레이디언트는 <image> 자료형의 특별한 종류인 <gradient>로 나타내며 두 개 이상의 색 간의 점진적 전환을 표현합니다. 그레이디언트에는 선형(linear-gradient (en-US) 함수), 방사형(radial-gradient (en-U
developer.mozilla.org
<애니메이션>
translateX: x축으로 이동
translateY: y축으로 이동
rotate: 회전
skew: 기울이기
scale: 커지게
->속성은 외워두기
<!DOCTYPE html>
<html lang="en">
<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>그레디언트</title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid black;
background: red;
margin: 50px auto;
transition: 2s;
}
#box:hover {
transform: scale(2.0);
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>--> 마우스 올리면 빨간 사각형이 두배 커짐
https://www.codingfactory.net/12593
CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성
CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회
www.codingfactory.net
▶1104-006
선을 휘어서 카피해서 넣으면 됨
<!DOCTYPE html>
<html lang="ko">
<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>애니메이션</title>
<style>
#box {
position: absolute;
/* absoulte를 단독으로 쓰면 브라우저를 기준으로 움직임 */
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background: pink;
animation-name: seon;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.92,-0.69,.6,1.36);
}
@keyframes seon {
from {
position: absolute;
top: 50px;
left: 50px;
}
/* from은 0%를 뜻함 */
25% {
position: absolute;
top: 50px;
left: 500px;
}
50% {
position: absolute;
top: 500px;
left: 500px;
}
75%{
position: absolute;
top: 500px;
left: 50px;
}
to{
position: absolute;
top: 50px;
left: 50px;
}
/* to는 100%를 뜻함, 퍼센트(분기점)은 내가 정하는 것 */
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
▶1104-퀴즈
<!DOCTYPE html>
<html lang="ko">
<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>박스 마우스오버</title>
<style>
#box {
width: 150px;
height: 120px;
margin: 100px;
background: url(김태리.jpg) no-repeat;
background-size: 100% 100%;
background-position: center;
transition: 0.3s;
}
#box:hover {
background-size: 120% 120%;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
마우스 올리면 태리 님이 박스 사이즈가 커지지 않고 확대됩니다...
처음에 scale 이용해서 해보려고 했는데.. 자꾸 박스 자체가 커져가지고 흠🤔
나중에 더 진도 나가면 참고해서 해 봐야겠다.
https://www.codingfactory.net/12584
CSS / 마우스 오버 효과 / 이미지 확대
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang='ko'> <head> <meta charset='utf-8'> <titl
www.codingfactory.net
▶1104-007
*2DEPTH MENU 만들기
<!DOCTYPE html>
<html lang="ko">
<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>2DEPTH MENU</title>
<style>
.cls001 {
list-style: none;
margin: 0;
padding: 0;
}
.cls001 > li /* 자식요소를 뜻하는 > */{
width: 120px;
height: 30px;
line-height: 30px;
/* height와 line-height를 똑같이 주면, 텍스트가 정확히 가운데 위치하고 li들이 서로 침범 불가 */
border: 1px solid black;
text-align: center;
float: left;
/* float은 왼쪽으로 붙여 띄운다는 의미 */
}
.cls001 li ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 자식요소를 굳이 표현안해도 됨 */
.cls001 li ul li {
width: 120px;
height: 30px;
line-height: 30px;
border: 1px solid black;
text-align: center;
display: none;
}
.cls001 li:hover ul li {
display: block;
}
</style>
</head>
<body>
<ul class="cls001">
<li>HTML
<ul>
<li>HTML1</li>
<li>HTML2</li>
<li>HTML3</li>
</ul>
</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Portfolio</li>
</ul>
</body>
</html>
-HTML에 마우스를 올리면 아래 리스트가 뜸
[소감]
오늘 첨으로 한번 어 뭐야 왜안돼? 싶을 때가 있었는데
자세히 보니 마지막에 ;가 안들어가서 다음 태그가 안 먹은 거였다...^^
역시 언제나 젤 단순한 게 중요하다...!
수업 중 선생님이 그냥 스쳐지나가듯 설명한 것들이나 궁금한 게 생길 때마다 구글링하는데
정말 친절하고 자세하게 설명해주는 분들이 많다.
내 블로그도 언젠가 그런 도움이 되는 날이 왔으면 좋겠다😉
'국비지원 > 프론트엔드' 카테고리의 다른 글
| 221110 Javascript - 아코디언 메뉴, 토글, 다크모드, sticky 등 (0) | 2022.11.10 |
|---|---|
| 221109 Javascript - 가위바위보, 팝업창, 사이드바, 모달뷰 등 (0) | 2022.11.09 |
| 221108 모바일 웹페이지, JavaScript 첫 수업 (0) | 2022.11.08 |
| 221107 HTML, CSS - 레이아웃, 반응형 웹 페이지 (0) | 2022.11.07 |
| 221103 HTML 첫 수업 - 각종 태그 속성으로 배우기 (0) | 2022.11.03 |