I. 꾸미기 : 스타일(4-1) [13~26]
1. CSS 구조화 (13)
태그 안에 스타일 들어가는 것을 인라인 스타일
스타일 줄수있는 영역을 stylesheet라고 한다
내부면 internal stylesheet / 외부면 external stylesheet
<외부인 경우>
외부로 하는 이유는 공통스타일 이거나 협업 또는 개별(HTML 과 CSS분리위한)유지 보수를 위한 모델 -> 집중하자
<link href="css/style.css" type="text/css" rel="stylesheet">h1,h2{
color: red;
}
h1.cafe{
color: green;
}
h1[lang="ko"]{
color: brown;
}2. CSS를 링크하는 방법 2가지 (14)
추가로 다른것도 만들어 주자 이 경우 순서는 지켜주어야한다
<link href="css/index.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">cascading이기 때문에 공통되는것이 먼저 위에 와야한다.
이렇게 두가지 방법이 있다
index 공통에다가 추가로 가능하다
첫번째 방법을 보면 네트워크를 보면 비동기로 가져오게된다
두번째 방법을 보면 동기적으로 가져온다. 즉 나중에 읽게된다. 이렇게 하면 길어지게된다.
이렇게 가져오면 네트워크가 끊어지면 전체 페이지 로딩이 문제시 될 수도있다
두개 중 무엇을 쓸거냐는 무조건 성능 생각은 지양하자
CSS는 CSS에서 책임(집중화)지는 관점에서는 두번째가 좋다 두단계정도는!!
가급적 두번째 방법을 쓰자.
3. 스타일 링크에서의 CSS우선순위 (15)
이렇게 단계적으로 있을 때 덮어 씌우기 관점에서 Internal Stylesheet가 적요된다
결국 red가 된다.
결국 blue가 된다
나중에 적용되서 그렇기도하다.
다만 이경우에도 외부스타일시트라도 id 로 접근하더라도, 여전히 blue이다
대전제 모든경우 인라인스타일이면 무조건 이김!! 딱 하나만 대상으로 해서
이후 id class 중에는 id이다
4. 문서 로드와 스타일 적용시기 (스타일 구분과 순서) (16)
DOM로드되어야 CSS를 볼 수있다.
메모리상 DOM TREE 가 생김 여기에다가 읽은 CSSParse가 올라감
과거에는 바로 렌더링해서 UI가 나왔다
그러나 요새는 DOM으로 그대로 객체화 시킨다 (문서객체화)
객체 는 데이터 구조를 의미함
오늘날에는 웹표준 (W3C, WharWg)에서 형식을 만든다
표준 모델대로 메모리에올린다. 이거에따라서 벤더들 파폭,사파리,오페라가 구현할 때 쓴다
하다가 오타 등으로 인식실패가 나올수있다 꼼꼼하게 스타일링 필요!
5. 스타일 작성(적용) 순서 (17)
먼저 컨텐트 블록스타일을 한다
이거보다 배치되어야할 더 큰 방 레이아웃 블록스타일이 필요하다
이런 텍스트를 꾸미기 위한 텍스트 스타일이다.
따라서 순서는 레이아웃 -> 컨텐츠 블록-> [컨텐츠 레이아웃 -> 텍스트 스타일]
텍스트 스타일은 편집기의 의미이기도 하고 컨텐츠블록스타일에서 결정할 수있다.
레이아웃 -> 콘텐츠블록(가구) -> (가구텍스트 )텍스트 -> 컨텐츠레이아웃(배치)
그런데 컨첸츠 레이아웃은 블록에 포함된다 왜냐하면 배치가 되기 때문이다.
컨첸츠 레이아웃은 반응형으로도 할 수있다.
6. Top 레이아웃 Box 스타일 (18)
PC는 격자로 좌우 가 다 보인다 (중첩형)
반면 모바일은 단순하다 너비 설정도 쉽다.
너비를 몇프로 쪼개서 쓰는게 아니라 100%이다. 높이만 설정하면 수월하다
이렇게 한번 색상을 다 넣어보자
넣어야 할 위치는 index.css에다가 넣자!
이렇게 했지만 박스가 망가진다.
박스를 만들면 컨텐츠 기본스타일 때문에, 이런경우 컨텐트를 먼저 주석처리 하는게 바람직하다.
<주석처리>
<!DOCTYPE html>
<html lang="en">
<head>
<!--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>
<link href="css/index.css" type="text/css" rel="stylesheet">
<!-- <link href="css/style.css" type="text/css" rel="stylesheet"> -->
</head>
<body>
<!-- 14 헤더영역 컨텐츠와 구조화 -->
<header class="header">
<!-- <h1 class="h1" lang="ko" id="h1" >알랜드</h1>
<div>메뉴버튼</div>
<div><a href="./uesr/signup.html">가입하기</a></div> -->
</header>
<!-- ------------------------------------------------------------------- -->
<nav class="cafe">
<!-- 나누어진 부분에 우두머리는 2번으로 하자 -->
<!-- <h1>
부안에 오면 꼭! 들리는 카페
</h1>
<div>
전체메뉴
</div>
<nav>
<h1 style="color:blue; font-size: 20px;">인기메뉴</h1>
<li><a target="_blank" href="./menu/detail.html"><img height="100" src="./images/ddal.jpeg" alt="딸기청"></a></li>
<li><a href="./menu/detail.html"><img height="100", src="./images/ddal.jpeg" alt="알랜드"></a></li>
<li><a href="./menu/detail.html"><img height="100", src="./images/ddal.jpeg" alt="아메리카노"></a> </li>
</nav>
<ui>알랜드 오시는 길</ui> -->
</nav>
<!-- -------------------------------------------------------------------------- -->
<section class="rland">
<!-- <h1>알랜드 소개</h1>
<article>
<h1>직접 만든 과일청을 맛보세요</h1>
<div>과일청</div>
<p>
신선한 과일과 알랜드만의 레시피로<br>
과일향의 풍미를 충분히 느낄 수 있는
수제청을 드셔보세요.
</p>
</article>
<article>
<h1>직접 구운 수제 쿠키를 만나보세요 </h1>
<div>쿠키</div>
<p>
신선한 버터 그리고 견과류를
이용해 바삭함을 더해 매일마다
</p>
</article>
<article>
<h1> 직접 구운 맛난 쿠키를 만나보세요</h1>
<div>쿠키</div>
</article>
<article>
<h1>다양한 로스팅으로 다채로운 맛을 느껴보세요</h1>
<div>커피</div>
</article>
<article>
<h3>알랜드 주변의 명소를 찾아보세요.</h4>
<div>명소</div>
<p>
알랜드 주변에는 30곳이 넘는 힐링 장소에서 맛나는 커피와 경치로 힐링을 해보세요
</p>
</article>
-->
</section>
<section>
<header>
<!-- h1으로 헤더에는 제목이 기본이다 -->
<h1> 부안의 아름다운명소</h1>
<div>전체명소</div>
</header>
</section>
</body>
</html>
7. 박스 외부의 이상한 여백문제 (Box 모델과 CSS 디버깅 )(19)
박스에만 스타일링이 가능하다 그런데 박스 외벽의 빈공백이 거슬린다
박스가 가진 기본모양을 아는것이 중요하다
경계선 사이에 margin이 있다.
현재 돌아가는 페이지를 동적으로 조작이 가능하다. 이 상태를 살펴보고 코드에 반영을 할 수있다
기본 마진이 8이 입혀있다.
여기를 0px로 바꿔주면된다
body는 style.css 에 두자
body는 전체페이지에 쓰기 때문이다.
8. Top 섹션에 이름 짓기 (20)
(1) TOP 레이아웃 블록에서 cafe 블록을 명명하기
스타일을 줄때는 오로지 클래스명 때에 쓰자
(2) 영역에 이름 붙이기
이게 정답은 아니지만 나름대로 이름을 정해주자!
그리고 스타일링 하고 HTML을 말들자.
원래같으면 스타일을 입히는 순서는 이름을 붙이고 꾸민 뒤에 HTML로 구조를 짠다
그러나 우리는 배우는 입장이기때문에 이름을 정한 뒤 -> HTML 구조를 짜고 -> 꾸민다
하나하나씩 어떻게 바뀌는지 알아야한다
9. 배경색을 칠하기 위한 값의 형태 (RGB색상 값) (21)
사실 우리는 명명된거 보다 명명과 그 사이의 색을 쓴다
두글자씩 표현하는데 6개인데 같으면 두글자씩 표현할 수있다
#ffffff (f6개이면 조명이 6개 다 있는 16진수 끝값이면 흰색이다)
같으면 #fff 도 가능하다
알파값을 넣으면 불투명도가 바뀌는 것이다.
.header{
background-color: #FF000099;
height: 50px;
}99 투명도가 표현되어있다.
10진수로 표현하고 싶은데, CSS는 color값 사용위한 함수가 있다.
이 경우 정수를 써야하고 실수값을 쓰면안된다
%와 일반 숫자를 섞어서 쓰면안된다.
투명도를 계산이 가능하다
.header{
/* background-color: #ff000099; */
background-color: rgba(255, 0, 0, 0.6);
height: 50px;
}이경우 알파값은 0~1사이로 해준다.
10. 색상의 또 다른 값의 형태 (HSL과 System색상 값) (22)
RGB가 아니라 각도를 기반으로 하는 것이다 hue방식
H는 각도를 의미한다.
S는 탁함 회색이 추가되는것이다
L은 밝은 빨강에서 발거나 어두워지는 것이다.
시스템 색상이다. 테마를 위한 색을 쓰겠다는 것이다.
운영체제의 색상에 따라서 같이 달라지겠다는 의미이다.
예로들어서 블랙테마는 블랙테마로!
11. 크기( 또는 거리)를 나타내는 값의 단위 (23)
px외에도 다른 단위도 있다.
크기는 가변크기 고정크기로 대별된다
vh : viewport height 를 의마한다 화면크기를 의미한다
vh50은 문서크기가 아니라 실제 내가 보는 화면에서 50%를 의미한다
왜 이게 나왔는가? %가 문제시 됐음
왜냐하면 %는 부모영역의 50%의미한다.
body는 0일때 같이 0이된다 차라리 화면크기 바로쓰는게 낫다.
.header{
/* background-color: #ff000099; */
background-color: rgba(255, 0, 0, 0.6);
width: 50vw;
height: 50vh;
/* vh vw vmin vmax 최근에 추가 됨*/
}
높이의 50% 너비의 50%로 됐다
12. vmix, vmax 크기단위 (24)
V계열의 W와 H가 있다.
50vh는 답답한놈이다. 만약 모바일폰의 가로세로 모드가 했을 때 둘다 화면의 절반을 먹는다
가로 세로일때 VW VH를 서로 바꿔주었다 이전에는 JS에서 해주었다
vmax는 긴쪽을 의미한다 결국 가로모드이던 세로모드이던 바뀌는건 없다
.header{
/* background-color: #ff000099; */
background-color: rgba(255, 0, 0, 0.6);
height: 50vmax;
/* height: 50vh; */
/* vh vw vmin vmax 최근에 추가 됨*/
}
13. font size와 가변크기 (25)
우선 폰트의 기본 사이즈는 16px이다.
이번에는 가변크기에서 폰트사이즈가 달라지는것이다.
em 이란게 있다.
어떤 텍스트에 박스가 있는데 박스에다가 텍스트 크기 정하기 위해서 폰트사이즈 지정이가능함
텍스트박스크기에 따라서 크기가 비례하는 것이다 비례적으로 같이커짐
일반적으로 그냥 텍스트의 px를 키우면 박스와 별도로 커진다 두개 다 바꿔야 해서 번거롭다
이런경우 사용되는것이 em이다.
.header{
/* background-color: #ff000099; */
background-color: rgba(255, 0, 0, 0.6);
font-size: 10px;
height: 10em;
/* height: 20vmax; */
/* height: 50vh; */
/* vh vw vmin vmax 최근에 추가 됨*/
}
헤더 적힌 텍스트의 px크기에 따라서
1em 은 1배, 2em 은 2배 등배수로 점점 늘려가기를 한다
즉 자기 근처에 있는 폰트사이즈에 따라가고 없으면 부모노드의 폰트사이즈에 따라간다
14. rem (root em)크기 (26)
(1) rem
최근 그냥 em 외에도 rem도 추가되었다
이전에 em이 한계가 있다.
다른 블럭이 같이 커지기를 원하는데, 태그마다 그 텍스트의 크기가 다르다 이러면 애매해진다
안에서는 16px 밖에서는 30px 이런경우이다
즉 지역적으로 말고 전체적으로 같이 비율적으로 커가는경우에는 문제가된다
그래서 등장한게 rem이다.
root이름 그대로 body의 px가 아니라, html태그의 px에 따라간다.
html{
font-size: 20px;
}
body{
font-size: 10px;
}
.header{
/* background-color: #ff000099; */
background-color: rgba(255, 0, 0, 0.6);
font-size: 10px;
height: 10rem;
/* height: 20vmax; */
/* height: 50vh; */
/* vh vw vmin vmax 최근에 추가 됨*/
}(2) ex
ex은 텍스트에서 가장 작은(위 X) 것을 기준으로 하는것이다
em은 반대로 배수의 기준이 가장 큰 (위 t) 를 기준으로 한다
한글에는 큰 의미가없다. 영문때 의미있음
II . 꾸미기 : 배경이미지(4-2) [27 ~ 37]
1. 배경 이미지 (27)
섹션에 배경이 있다.
위 3가지는 기존에 있던거고 아래 size는 css3.0에 새로 도입되었다.
이미지가 들어갈때는 약간 이미지가 크거나 박스가 더 클 수있다.
이미지를 넣을 때 미리 알아야한다.
이런경우 배경이미지 개념은 박스가 공간이 만들어진다음에 벽지를 바르는 것이다.
벽지가 패턴형이다. 벽지는 작은 그림 여러번 반복해서 하는것 처럼 가능하다.
벽지처럼 반복이 가능하다
반복을 x축 y축 어디나 가능하다
no-repeat 만약에 반복을 실어하면 하나의 이미지만 보여준다.
.header{
background-image: url(../images/star.png);
height: 100px;
}
이렇게 아무 설정안하고 하면 기본값으로 반복해서 나온다
.header{
background-image: url(../images/star.png);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
height: 100px;
}x,y 로 설정이 가능하고 no로 하면 반복이안된다 .
배경이미지는 세가지를 잘 해야한다
첫번째 이미지를 넣으면 반복이 이루어지고 no-repeat로 반복을 멈추어야한다
두번째는 이미지가 반복하지않으면 좌상단에 하나만 고정된다
이런경우 반복을 위치를 바꿔줄 수있다.
.header{
/* background-color: #ff000099; */
/* background-color: rgba(255, 0, 0, 0.6); */
/* font-size: 10px; */
background-image: url(../images/star.png);
background-repeat: no-repeat;
background-position: 10px 10px;
background-position: right bottom;
background-position: center;
height: 100px;
}이렇게 다양한 방식으로 위치를 지정할 수있다.
.spot{
height: 350px;
background: url("../images/b23.jpg");
background-repeat: no-repeat;
background-position: center;
}
이렇게 된다.
2. 배경 이미지 크기 설정 (28)
CSS3.0 이전까지는 이미지를 넣으면 이미지크기에 상관없이 조정할수있는 옵션이 없었다
이제는 크기까지 지정이 가능하다
만약 50px 50px를 하면 그 크기만 큼 %를 하면 그 크기만큼 한다
그런데 %를 유용하지않다 왜냐하면 배경이미지가 꺠져서 엉성하게 나온다 그래서 잘 쓰지않는다
그래서 비율은 유지하면서 쓰는것이다
cotain은 비율 안깨지고 들어가서 온전하게 전체를 다 컨테인 할수있게 넣으라는 의미이다
cover는 담으니 빈공백이 있다. 나오더라도 빈공백이 없기를 원한다면 채우기가 가능하다.
contain 하면 여백이 있다.
cover하면 다 채워진다.
3. 배경 속성 약식표현 (29)
이전처럼 하나씩 하는것도 좋지만, 나눠서 하기보다 한번에 하는 것도 가능하다
이 경우 특정 속성을 정의하기는 어렵지만 코드량으로 보면 이점이 있다
, 없이 스페이스로 쭉 나열하면 됨
순서는 상관없이, 퍼센트만 저렇게 지켜주면된다.
.spot{
height: 350px;
/* background: url("../images/b23.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: contain; */
background: url("../images/b23.jpg") no-repeat center/cover;
}이렇게 하면 아래에서 한줄로 가능하지만, 브라우저에서 껏다켰다 할수 없다.
디버깅할 때는 어렵긴하다
4. 알랜드 카페 영역 배경이미지 (30)
(1) 알랜드 cafe 블록에 배경 이미지 사용하기
메뉴와 헤더가 배경은 하나이지만 형제관계로 붙어있다
또는 하나의 부모 태그를 만들어 준다 즉 두개를 엮어줄 div를 만들어준다
CSS를 입히기위해서 만드는 태그는 무조건 div 태그를 한다
div를 사용시의 너비는 부모의 너비를 그대로 100%가진다
자식이 없으면 높이는 0%이다.
우리는 header와 nav태그를 div로 묶어주자
<div class="header-CafeBgBOx">
<header class="header">
<h1>헤더</h1>
<!-- <h1 class="h1" lang="ko" id="h1" >알랜드</h1>
<div>메뉴버튼</div>
<div><a href="./uesr/signup.html">가입하기</a></div> -->
</header>
<!-- ------------------------------------------------------------------- -->
<nav class="cafe">
<!-- 나누어진 부분에 우두머리는 2번으로 하자 -->
<!-- <h1>
부안에 오면 꼭! 들리는 카페
</h1>
<div>
전체메뉴
</div>
<nav>
<h1 style="color:blue; font-size: 20px;">인기메뉴</h1>
<li><a target="_blank" href="./menu/detail.html"><img height="100" src="./images/ddal.jpeg" alt="딸기청"></a></li>
<li><a href="./menu/detail.html"><img height="100", src="./images/ddal.jpeg" alt="알랜드"></a></li>
<li><a href="./menu/detail.html"><img height="100", src="./images/ddal.jpeg" alt="아메리카노"></a> </li>
</nav>
<ui>알랜드 오시는 길</ui> -->
</nav>
</div>이경우 div 태그의 구분자는 - 쓰자
CSS 배치도 header와 nav 보다 부모 즉 위에 있어야한다.
(2) 블록의 높이 설정하기
height는 자식박스의 높이의 총합이기 때문에 별도로 손을 댈 것이없다. (직접 지정 X)
background 는 반복되는것으로 보일 수있다. 이런 반복을 멈춰주어야한다
cover를 해서 size를 조정할 수있다. 이 상태에서 전체 이미지 중 원하는 파트로 특정하고싶다
위치를 잡아주는 position을 해준다.
.header-Cafe-Bg-Box{
background: url(../images/2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header{
/* background-color: #ff000099; */
/* background-color: rgba(255, 0, 0, 0.6); */
/* font-size: 10px; */
/* background-image: url(../images/star.png);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position: 10px 10px;
background-position: right bottom;
background-position: center; */
height: 50px;
/* height: 20vmax; */
/* height: 50vh; */
/* vh vw vmin vmax 최근에 추가 됨*/
}
.cafe{
height: 480px;
/* background-color: aqua; */
}
5. 배경이미지의 여백 색칠하기 (31)
배경 이미지가 cover는 여백없이 다 채우는 것이다 (contain은 이미지를 다 넣는 것이다.)
그래서 반응형의 경우에 cover는 여백을 채우기 위해서 이미지가 확대가 된다
이전까지는 여백에 나온부분을 책임져야하기 때문에 다른 배경색을 넣어주면된다.
한편 background-color 을 동시에 넣으면 덮어쓰기가 된다. 그래서 이미지 넣는 곳에다가 그 이미지 색상을 넣어주면된다.
.header-Cafe-Bg-Box{
background: #D4BFA0 url(../images/2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
6. 그라디언트 배경색 (32)
CSS2.0에서는 지원이 안돼서 포토샵으로 한뒤에 넣었다 이제는 CSS3.0에서 지원함
지원하는 것은 총 5가지이다.
선형 / 원형 / 선형이 반복 / 원형반복 / 원뿔형반복 : 이 중 선형방식이 가장 많이 이용된다
흔히들 background-color에 들어간다고 생각하지만 -image할때 들어갈수있다.
7. Linear Gradient (33)
선형을 의미하는것이다.
to right를 쓰거나 <angle>를 쓸 수있다
to top, bottom, left, right 4가지 방향으로 가능하다
만약 대각선을 원하면 to right bottom (우하단으로)으로 가능하다
만약 디테일한 방향성 표현을 위해서는 각도 angle가 가능하다.
deg 각도
rad 는 radian
grad 는 특이한데 100grad는 90도를 의미한다 / 만약 40도는 50grad
trun 은 바퀴이다. 1을 쓰고 trun 을 하면 1바퀴이다. 90도 표현을 워낳면 trun 을 하면 0.25이다.
여기 중 가장 편한걸 쓰면 된다
<실습>
.rland{
height: 530px;
background-image: linear-gradient(to top, red, blue );
/* background-color: red; */
}
.rland{
height: 530px;
background-image: linear-gradient(45deg, red,green, blue );
/* background-color: red; */
}
45도를 넣어줄 수 있다.
개발자 도구를 보면 45도 각도를 볼 수있다. 저 버튼을 누르면 테스트로 조정해볼 수있다.
여기서 나눈 것의 합이 100%이 아니고 차지하는 부분의 차츰나아가는 만큼의 퍼센트를 의미한다
딱 멈추는 순간도 살펴볼 수있다.
이렇게 하면 그라데이션 영역을 없앨 수도 있다.
8. Radial Gradient (34)
shape 는 원이냐 타원이냐이다
size 를 잘못 오해하는게 다수이다 유의하자
position 은 지금까지 했던거 처럼 위치 잡을 수있다.
.rland{
height: 530px;
background-image: radial-gradient(circle, red,green, blue );
/* background-color: red; */
}
9. Radial Gradient 옵션(35)
이선 선형그라디언트 처럼 옵션 설정이 가능하다.
%도 이전처럼 어디까지 차지할지 마찬가지이다.
다만 이경우 원이 어디서 부터 어디쪽 까지 방향으로 가는지가 33% 66%가 필요하다
이때 크기를 결정하는것이 ending shape이다
가장 우측은 기본값이다
closest-side
중심점으로 부터 가장자리 사방면 중 가장 가까운 상단으로 한다 이를 기준으로 3등분이다
closest-corner
이는 4부분이 다 같다 다를수가 없다 왜냐하면 가운데 정렬이 되어있기 떄문
farthest-side
이는 가장 먼 면을 기준으로 한다
farthest-corner (기본값)
4방면 중에 가장 먼부분이다 어떤부분가 동일하기 때문에 결국 closest-corner와 비슷한것이다
33% ~ 66% ,딱 그 범위에서 자기색이 들어나게끔 할 수있다.
하지만 두개는 완전 동일하지 않다 보기에는 같아 보이는 이유는 원이 가운데 있기 때문이다
상황을 다시 살펴보자 박스의크기를 늘려보자
가장 가까운 코너가 두번째 네번쨰는 엄밀하게 ending shape가 다르다.
.rland{
height: 530px;
background-image: radial-gradient(circle closest-side at 100px 100px, red,green, blue );
/* background-color: red; */
}
결국 원의 위치를옮겨서 가장가까운 옵션 방식으로 보면 이렇게 된다.
가장 가까운 코너는 좌상단 부분이다.
이것을 기준으로 RGB가 쪼개어진다.
10. 멤버 페이지 그라디언트로 배경 칠하기 (36)
그라데이션 넣으려고 하는데
배경 넣으려면 그라데이션 못넣고, 반대로도 마찬가지이다
즉 그라데이션을 이미지로 인식한다 - 속성을 덮어 씌운다
이런경우 방지를 위해서 멀티백그라운딩이 된다. (브라우저가 오래되면 지원안함)
호환성 높이기 위해서 따로하는 방식이 있긴하다
하지만 url이미지를 쉼표로 나누어서 여러가지 나열하면 가능하다
url 마다 repeat 옵션을 따로 둘 수있다
shorthand 로 줄여서 가능하다
background -image(삭제) 로 줄일수있다
1)
우선 member 관련 index.html 과 index.css 를 만들자
<!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>Document</title>
<link href="../css/member/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header-welcome-bg-box">
<header class="header">
<h1>로그인 페이지</h1>
<div> 사용자 정보 버튼</div>
</header>
<section class="welcome">
<h1>
<a href="./notice/detail.html">
새로운 메뉴를 확인해보십시오.
</a>
</h1>
<p>
4계절이 아름다운 알랜드를 찾아주셔서 감사함
</p>
</section>
</div>
</body>
</html>body{
margin: 0;
}
.header-welcome-bg-box{
height: 244px;
background-color : red;
}
2)
<div class="header-welcome-bg-box">
<header class="header">
<!-- <h1>로그인 페이지</h1>
<div> 사용자 정보 버튼</div> -->
</header>
<section class="welcome">
<!-- <h1>
<a href="./notice/detail.html">
새로운 메뉴를 확인해보십시오.
</a>
</h1>
<p>
4계절이 아름다운 알랜드를 찾아주셔서 감사함
</p> -->
</section>
</div>주석한 경우 red처리한 것이 안나올수있는데 그 이유는 컨텐츠가 없어서 높이가 0인 상태이기 때문이다
블럭은 정적인 크기로 고정하는것이 좋다
body{
margin: 0;
}
.header-welcome-bg-box{
height: 244px;
/* background : linear-gradient(#A24F17, transparent),
url("../../images/1.jpg") no-repeat center/cover
; */
background-color: red;
}
3)
body{
margin: 0;
}
.header-welcome-bg-box{
height: 244px;
background : linear-gradient(#A24F17, transparent),
url("../../images/1.jpg") no-repeat center/cover
;
}배경 이미지에다가 한번에 여러개 둘때는 그라데이션과 이미지 무엇이 먼저인지 보아야한다.
그라디에션을 먼저 넣고, 이미지를 넣으면된다 . 이 경우 창의적으로 넣지말고, 디자이너가 정한 이미지의 색상에 맞게끔 한다
여기서 transparent는 투명색이다
11. background 옵션 (37)
(1) 배경보다 창의 크기가 작은경우
attachment 는 배경을 붙이는 것이다. 3가지 차이를 이해하기가 쉽지는않다
fixed 의 경우 viewport 가 붙는다 고정을 시킨다
이거는 어렵게 말하면 출력영역(보이는영역)이고 쉽게 말하면 화면에 배경붙는것이다
local
은 element contents 에 고정하는 것이다
scroll
요소 자체로 한다
(2) 실습 + overflow
ralnd 에다가 이미지를 지정해준다
css에서 이미 높이를 설정한 경우에는 컨텐트의 주석을 풀더라도 컨텐트와 상관없이 높이가 고정된다
즉 영역 밖까지 생긴다 (overflow)
이런 경우 옵션에다가 overflow를 하면 넘치는 것은 스크롤로 갈음한다
auto 여부에 따라 / scroll 은 상관없이 스크롤 있게 한다.
.rland{
height: 530px;
overflow: scroll;
/* background-image: radial-gradient(circle closest-side at 100px 100px, red,green, blue ); */
/* background-color: red; */
background: url("../images/2.jpg") no-repeat center;
}
scroll 과 fixed 비슷한데 차이가 있다
둘다 스크롤바가 있는데 fixed하면 바깥 스크롤바와 상관없이 안쪽 스크롤바는 움직이지 않는다
local 은 차이가 뭘까?
컨텐트에 붙어서 따라간다.
'배움 __IL > addtionalFrontEnd' 카테고리의 다른 글
| TIL : 웹퍼블리싱 CSS 4회 (4-5) (0) | 2023.02.05 |
|---|---|
| TIL : 웹퍼블리싱 CSS 3회 (4-3 , 4-4) (0) | 2023.02.04 |
| TIL : 웹퍼블리싱 CSS 1회 (1,2,3) (0) | 2023.02.04 |
| TIL : 웹퍼블리싱 HTML 6회 (12,13) [완] (1) | 2023.02.04 |
| TIL : 웹퍼블리싱 HTML 5회 (10,11) (0) | 2023.01.30 |