속성:속성값;
text-transform: uppercase/capitalize/lowercase
text-transform : uppercase ;
/* html을 바꿀 필요 없이 영어 소문자를 css에서 대문자로 바꾸고 싶을 때
text-transform: uppercase을 써준다. */
text-transform : capitalize ; /* 첫 글자를 대문자로 바꿈 */
text-transform : lowercase ; /* 대문자를 모두 소문자로 바꿈 */
*인라인 속성 태그들(ex. span)은 글자를 꾸미는 용도로 주로 쓴다.
더보기
flex가 여러번 중첩되어 있으면 반응형할 때 control이 어렵다. 적재적소에 써야한다.
***주석을 달아줘야 나중에 길어질 때 찾기 편하다. 태그 구조가 여러개로 나눠질때 주석으로 써 놓는게 좋다.
< title > flex실습_선생님이 만든 대남병원클론코딩 </ title >
<!-- css -->
<link rel="stylesheet" href="./css/teacherlayout.css"/>
</ head >
< body >
<!-- 왼쪽의 이미지와 글자박스, 글자는 글자박스의 중앙, 사이 여백 만들어주기 같은 제목 태그인데 일부분만 굵기와 색상이 다름. 제목에 따른 내용은 p태그 써주기 -->
< div class = "container" >
<!-- 왼쪽배경이미지+제목영역 -->
< div class = "left" >
<!-- 🔴이미지는 항상 액자<div>를 만들어서 그 안에 끼워야한다!!!!
< div class = "bg_img" >
< img src = "./Img/bg_img.png" alt = "배경이미지" />
</ div >
< div class = "sec_title" >
< h4 > service </ h4 >
< h2 >
대남병원의 < br />
< span > 의료서비스 </ span >
</ h2 >
< p >
언제나 열린 마음으로 환자분들과 함께하며 < br />
안전하고 편안한 의료 서비스를 제공합니다.
</ p >
</ div >
<!-- 왼쪽 컨테이너 먼저 만들고, 레이아웃 정렬하기, 가장 큰 구조인 container부터 구조를 잡아라 -->
</ div >
<!-- left에밖에 display: flex;주지 않았기 때문에 자식 요소들만 정렬됐지, right박스는 left아래 위치하게 된다.
이때 부모박스인 컨테이너에 flex해준다. 전체에서 35%를 왼쪽, 나머지 65%를 오른쪽으로 배치하면 된다. -->
<!-- 카드컨텐츠영역 -->
<!--🔴 margin: 0 auto; 줘도 됨/패딩 줘도 됨/flex align-items:center;, justify-content: center;줘도 된다.
단, flex너무 많이 쓰지 않는 것이 중요하다. 패딩이나 마진 0 auto추천 -->
< div class = "right" >
<!-- 하나의 카드 안에 패딩으로 동일한 여백 을 주고, 라인 기준으로 상하로 나눌거다. -->
< div class = "card_wrap" >
<!-- card1 -->
< div class = "card" >
< div class = "card_top" >
<!-- 동그라미 안에 아이콘처럼 디자인이 들어간 요소는 span태그를 주로 쓴다. -->
<!-- window버튼+.(dot)클릭하면 이모지 창 열림! -->
< span > 🏨 </ span >
< h3 > Hospital Introduction </ h3 >
</ div >
< div class = "card_bottom" >
< h3 > 병원소개 </ h3 >
< p >
연혁과 대남병원의 미션과 비전, < br />
병원 인테리어를 확인해 보세요.
</ p >
</ div >
</ div >
<!-- card2 -->
< div class = "card" >
< div class = "card_top" >
< span > ☎️ </ span >
< h3 > Use Information </ h3 >
</ div >
< div class = "card_bottom" >
< h3 > 이용안내 </ h3 >
< p >
입원생활과 제증명 발급 안내, < br />
비급여 항목을을 확인해 보세요.
</ p >
</ div >
</ div >
<!-- card3 -->
< div class = "card" >
< div class = "card_top" >
< span > ♥️ </ span >
< h3 > Mental Health Information </ h3 >
</ div >
< div class = "card_bottom" >
< h3 > 정신건강정보 </ h3 >
< p >
조현병, 기분장애, 알코올 사용장애 등 < br />
자가진단을 통해 확인해 보세요.
</ p >
</ div >
</ div >
</ div >
...(생략)
css↓
charset "utf-8" ;
/* 원래 초기화는 내가 안 쓸 태그들까지 전부 불러와서 초기화시켜야한다. */
/* 초기화는 맨 위에다 초기화라고 주석 달아 놓아야한다. */
* {
margin : 0 ;
padding : 0 ;
}
/* 이미지태그 초기화 */
img{
border: none;
display: block;
}
/* a태그 초기화 */
a{
text-decoration: none;
}
/* 목록태그 초기화 앞에 생기는 불릿 없애주려고고 */
ul,
ol,
li{
list-style: none;
}
/* 레이아웃 */
.container {
width : 100% ;
height : 554px ;
display : flex ;
}
.left {
width : 35% ;
height : 100% ;
background-color : rgb ( 250 , 180 , 223 );
display : flex ;
align-items : center ;
}
/* sec_title 을 left카드의 세로 중앙에 보내면 위아래 마진 줄 필요 없이 align-items: center; 로 배치할 수 있다. */
/* flex는 left에 줘야한다. */
/* container도 부모박스가 되어 left를 flex */
/* 제목영역 */
.sec_title h4 {
color : steelblue ;
font-size : 24px ;
font-weight : 400 ;
/* font weight는 100부터900까지 쓸 수 있다. 숫자가 클 수록 두껍다. */
text-transform : uppercase ;
/* html을 바꿀 필요없이 영어 소문자를 css에서 대문자로 바꾸고 싶을 때 text-transform: uppercase을 써준다. */
margin-bottom : 40px ;
}
.sec_title h2 {
font-size : 40px ;
font-weight : 400 ;
color : #777 ;
margin-bottom : 40px ;
}
.sec_title span {
/* 후손문법. 어디 안에 들어있는 무슨 태그를 불러오겠다. */
color : #222 ;
font-weight : 800 ;
}
.sec_title p {
color : #777 ;
font-size : 18px ;
}
/* 카드 컨텐츠 영역 */
.right {
width : 65% ;
height: 100%;
/* height: 100%하면 부모박스의 높이를 따라간다. */
padding : 100px ;
/* 🔴패딩은 width랑 height 바깥에 적용된다. box-sizing을 border-box로 지정해서
컨텐츠 영역 안에 패딩을 밀어넣어줘야한다. */
box-sizing : border-box ;
}
.card_wrap {
width : 100% ;
height : 100% ;
/* 100%주면 패딩 영역을 제외한 부분 */
display : flex ;
gap : 20px ;
}
.card {
/* 실무에서 할 때는 넓이를 임의로 주는게 아니라 시안에 명시되어 있는 사이즈로 준다. */
width : 300px ;
height : 100% ;
/* 300에 100을 지정해주면 컨텐츠에 딱맞는 사이즈를 말한다. 거기 기본패딩이 있으므로
box-sizing: border box를 적용해야한다. */
border-radius : 20px ;
padding : 30px 20px ;
border : 1px solid gray ;
box-sizing : border-box ;
/* 패딩 공백으로 구분하고 첫번째는 상하, 두번째는 좌우 */
}
.card_top {
width : 100% ;
overflow : hidden ;
border-bottom : 1px solid gray ;
/* border-bottom을 줘야 아래쪽에만 border가 생긴다. */
}
.card_top span {
/* span태그는 inline태그라서 넢이, 높이 줄 수 없다. */
display : block ;
/* 블록으로 바꿔주려는 태그에 바로 display: block;써준다. */
width : 80px ;
height : 80px ;
border-radius : 100% ;
background-color : blue ;
font-size : 30px ;
text-align : center ;
line-height : 76px ;
margin-bottom : 20px ;
}
.card h3 {
font-size : 16px ;
margin-bottom : 20px ;
}
.card_bottom {
padding-top : 20px ;
/* 패딩이 들어가면 box-sizing은 해주는게 좋다. 그래야 넓이 높이가 유지되므로 */
box-sizing : border-box ;
}
.card_bottom {
color : #777 ;
}
/* gap은 부모박스한테 줘야하므로 card_wrap에 준다. */
대남병원 클론코딩결과
list
홈페이지에서 메뉴를 만들 때 보통 ul에 li (순서가 없는)
나무위키나 진짜 목록을 만들어야 하는 페이지는 ol에 li (순서가 있는)
list-style속성 목록의 스타일을 지정하는 속성. list-style-type & list-style-position 이 하나로 합쳐진 속성
1. list-style-type 목록 앞에 붙어있는 숫자 또는 불릿의 모양을 바꿀 때 사용
[ul]
disc: 기본값으로 ● (채운 원) 모양이 나온다. circle: ○ (비운 원) 모양이 나온다. square : ■ (채운 사각형) 모양이 나온다. none : 가장 많이 사용되며, 불릿의 모양을 없앤다.
[ol]
decimal : 기본값으로 1로 시작하는 10진수(1,2,3...)를 말한다. decimal-leading-zero : 앞에 0이 붙는 10진수(01,02,03...)를 말한다. lower-roman : 로마 숫자 소문자(i,ii,iii...)를 말한다. upper-roman : 로마 숫자 대문자(I,II,III...)를 말한다. lower-alpha 또는 lower-latin : 알파벳 소문자(a,b,c...) upper-alpha 또는 upper-latin : 알파벳 대문자(A,B,C...) armenian : 아르메니아 숫자 georgian : 조지왕조 시대 숫자 none : 가장 많이 사용되며, 불릿의 모양을 없앤다.
2. list-style-position
속성값
inside : 불릿이나 숫자를 안쪽으로 들여쓰기한다. (화면 중앙이 센터면 안쪽 중앙쪽으로) outside : 불릿이나 숫자를 바깥쪽을 내어쓰기한다. 기본값 (센터에서 멀리 왼쪽으로)
숫자가 보이도록 들여 쓰기
list-style-position: inside;
list-style: upper-alpha inside ; 숫자+들여쓰기여부
더보기
항상 하나의 속성에 여러 가지 속성값을 쓸 경우 공백으로 구분하면 된다.
※메뉴 목록을 초기화하기 → list-style: none;
*{margin: 0; padding: 0;}으로 브라우저 기본 여백을 없애면 ul, ol의 앞에 있는 숫자와 불릿은 브라우저 바깥으로 빠지면서 화면에서 사라진 것처럼 보인다. 하지만 실제로 사라진 것이 아니기 때문에 웹사이트의 메뉴를 작업할 때에는 반드시 list-style: none;으로 초기화해야한다.
box-shadow속성 사진 주변 또는 박스의 주변으로 그림자를 추가하면 멋진 효과를 만들어낼 수 있다.
box-shadow속성을 사용하면 디자인 프로그램을 따로 사용하지 않고도 그림자를 만들어낼 수 있다.
[기본형] (5개 속성, px값 사용)
box-shadow : 수평거리px 수직거리px 흐림정도px 번짐정도px 색상 inset;
· 수평거리 : 그림자의 가로 위치. 음수는 왼쪽으로 이동하고 양수는 오른쪽으로 이동한다.
· 수직거리 : 그림자의 세로 위치. 음수는 위쪽으로 이동하고 양수는 아래쪽으로 이동한다. (양수는 center중심에 가깝게 이동한다!)
· 흐림정도 : 투명도opacity처럼 생각해라.그림자의 농도를 조절한다. 기본값은 0, 숫자가 커질수록 부드러운 그림자를 나타낸다.
· 번짐정도 : 그림자의 범위를 조절한다. 기본값은 0, 양수를 사용하면 그림자가 퍼져서 박스보다 그림자가 커지게 보인다. 음수를 사용하면 박스보다 그림자를 작게 표현할 수 있다.
· 색상 : 기본값은 검은색, hex코드나 rgb 또는 rgba와 같은 다양한 단위로 그림자 색상을 표현한다.
· inset : 박스의 안쪽에 그림자.
< style >
.box {
width : 400px ;
height : 300px ;
background-color : coral;
/* 그림자효과 */
box-shadow : 6px 12px 13px 2px #797672 inset;
border-radius : 100% ;
border : 0.5px solid rgb( 247 , 234 , 212 );
}
box-shadow
개발자 도구 검사로 그림자 열어서 흐림정도 번짐정도 색상 조절해서 그대로 복사해서 css에 붙이면 된다.
box-shadow 넣은 상태에서 border-radius를 box에 넣게 되면 그림자에도 border-radius가 생긴다.
(박스그림자이기 때문에 !)
text-shadow속성 text-shadow : 수평거리px 수직거리px 흐림정도px 색상; (박스쉐도우와 달리 번짐정도와 inset은 없다
· 수평거리 : 그림자의 가로 위치. 음수는 왼쪽, 양수는 오른쪽으로 이동한다.
· 수직거리 : 그림자의 세로 위치. 음수는 위쪽, 양수는 아래쪽으로 이동한다.
· 흐림정도 : 투명도opacity처럼 생각해라. 그림자의 농도를 조절한다. 기본값은 0, 숫자가 커질수록 부드러운 그림자를 나타낸다.
· 색상 : 기본값은 검은색이며 hex코드나 rgb 또는 rgba와 같은 다양한 단위로 그림자 색상을 표현한다.
개발자 도구 열어서 어떻게 나오는지 보고 설정
h1 {
font-size : 150px ;
color : rgb( 134 , 134 , 190 );
text-shadow : 6px 12px 10px #00000086;
}
text-shadow
오후수업
1. 후손 선택자와 자손 선택자 후손선택자는 부모 태그 안에 있는 모든 자식 태그
후손 선택자의 표기법은 공백으로 표현
자손 선택자는 부모 선택자의 바로 아랫계층에 있는 태그, 표기할 때 '>'로 표기
[기본형]
후손 선택자 : 부모태그A 후손태그B (*클래스명으로도 같은 형식으로 불러올 수 있다.)
: 선택자A안에 있는 자식 선택자B를 선택한다.
자손 선택자 : 부모태그A > 자식태그B
: 선택자A의 바로 아랫계층의 자식 선택자 B를 선택한다.
< body >
< div >
🙋♀️ < h1 > 제목1 </ h1 >
🙋♀️ < h2 > 제목2 </ h2 >
🙋♀️ < div >
👶 < ul >
< h2 > 제목2 </ h2 >
< li > menu1 </ li >
< li > menu2 </ li >
< li >
< span > menu3 </ span >
</ li >
</ ul >
</ div >
< h2 > 제목2 </ h2 >
< span > span </ span >
</ div >
</ body >
맨 위 div기준으로 h1,h2,div 바로 아랫계층에 있는 태그들은 자손 ! ul과 h2, li, span 모두는 후손
< style >
/* 후손문법 */
div li {
background-color : green;
}
/* 자손문법 */
div > h2 {
border : 2px solid darkorchid;
}
/* 후손으로 div안에 있는 span태그 불러와 글자색 바꾸기*/
div span {
color : orange;
}
/* 자손으로 ul안에 있는 h2만 불러와서 배경색 지정하기 */
ul > h2 {
background-color : cadetblue;
}
/* div 자손 span에 점선 테두리 (3px)를 넣기 */
div > span {
border : 3px dashed black;
}
</ style >
후손 선택자, 자손 선택자 적용된 모습
2. 동위선택자(=형제선택자) 동위선택자는 동위 관계(형제 관계)에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자이다.
같은 라인에 있는 태그들.위에 있으면 형,아래에 있으면 동생
[기본형]
형태그A + 동생태그B 바로 아래 에 있는 동생태그 B를 선택한다. (동생태그 오직 1개만 불러올 수 있다.)
형태그A ~ 동생태그B (아랫줄 중간에 c태그가 껴 있어도 동생태그 b들은 다 불러올 수 있다.) * 항상 가장 위에 있는 형태그를 먼저 써주어야한다.
< style >
h1 + h2 {
color : tomato;
}
h1 ~ h2 {
background-color : beige;
}
</ style >
반응선택자 사용자의 행동에 반응하여 변경된 태그의 모습을 보여주는 선택자
액티브(active) : 클릭하는 동안
호버(hover) : 마우스가 올라가 있는 동안
[기본형]
· ★선택자:hover :공백없이 써줘야한다
: 사용자의 마우스 포인터가 위치한 태그를 선택한다.
· 선택자:active
: 사용자가 클릭한 태그를 선택한다. 단 클릭하는 동안만 선택한다.
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > 반응선택자 </ title >
< style >
div {
width : 200px ;
height : 200px ;
margin : 20px ;
}
.box1 {
background-color : rgb( 240 , 153 , 228 );
}
.box2 {
background-color : olivedrab;
}
.box3 {
background-color : rgb( 116 , 170 , 206 );
}
/* 마우스가 올라가면, 선택자A: :공백없이 써줘야한다 . */
.box1:hover {
background-color : purple;
border-radius : 100% ;
}
.box2:hover {
box-shadow : 3px 3px 10px 10px black;
background-color : greenyellow;
}
.box3:active {
background-color : yellowgreen;
border : 5px double green;
}
h3 {
font-size : 40px ;
text-align : center;
line-height : 200px ;
/* 텍스트를 숨김 */
display : none;
margin : 0 ;
}
/* box1에 마우스를 올리면 그 안에 있는 h3이 */
.box1:hover h3 {
display: block;
}
</ style >
</ head >
< body >
<!-- hover주기 -->
< div class = "box1" >
< h3 > text </ h3 >
</ div >
<!-- active주기 -->
< div class = "box2" ></ div >
< h3 > text </ h3 >
< div class = "box3" ></ div >
</ body >
</ html >
hover, active 적용 전 box3개
hover, hover, active 적용된 모습. 개발자도구의 hov누르고 상태 보려는 거 체크, 확인하려는 태그 체크한다.
