Web_Front-end/CSS(6)
-
[CSS] 2021.01.13. DAY_55. 그림자설정
◎ 그림자 설정 text-shadow(문자그림자), box-shadow(박스그림자)가 있다 ○ text-shadow text-shadow: x좌표 y좌표 번짐값 색; 좌표는 양수, 음수값 모두 넣을 수 있다 ○ box-shadow text-shadow: x좌표 y좌표 번짐값 색; 좌표는 양수, 음수값 모두 넣을 수 있다 오늘은 수요일 입니다 2021년 1월 13일 div에 box-shadow설정해보기 월 화 수 목 금 토 일 ◎ 테두리 ○ border-radius 둥근 테두리 (CSS3의 기능) - 모든 모서리가 값만큼 깎인다 border-radius: 값; - 모서리마다 둥글게 깎을 값을 정하기 (좌상단부터 시계방향으로 돌아간다) border-radius: 좌상단값 우상단값 우하단값 좌하단값; 값의 위..
2021.01.13 -
[CSS] 2021.01.13. DAY_55. 레이아웃 설정해보기
◎ 레이아웃 설정해보기 mainBackground(900(w) x 130(h)) mainLogo(80(w) x 80(h)) navibar(900(w) x 50(h)) news1(400(w) x 400(h)) ad1(200(w) x 200(h)) loginBox(200(w) x 150(h)) footer(900(w) x 120(h)) mainBackground(900(w) x 130(h)) navibar(900(w) x 50(h)) news1(400(w) x 400(h)) ad1(200(w) x 200(h)) loginBox(200(w) x 150(h)) footer(900(w) x 120(h)) head mainBackground 이미지 출처 m.blog.naver.com/PostView.nhn?blog..
2021.01.13 -
[CSS] 2021.01.13. DAY_55. scrollbar, 디자인_위치구분, 좌표설정
◎ scrollbar overflow: auto 지정된 크기보다 데이터의 양이 많을 때 스크롤 바를 붙여 지정된 크기 안으로 데이터를 넣을 때 사용 kakao 카카오계정 서비스약관에 동의해주세요. -------생략---------- Copyright © Kakao Corp. All rights reserved. kakao 카카오계정 서비스약관에 동의해주세요. -------생략---------- Copyright © Kakao Corp. All rights reserved. ◎ 디자인 ※ 1. 위치구분 float 대상을 왼쪽이나 오른쪽으로 구분하여 보낼 때 사용 사용) float: left; float: right; div1 div2 div3 ※ 2. 좌표설정 좌표를 설정하여 원하는 위치에 보내기 사용) ..
2021.01.13 -
[CSS] 2021.01.13. DAY_55 여백설정, 선설정
◎ 여백 데이터를 보여주기 전에 생기는 간격 margin, padding을 제공 margin padding 기준선 밖 여백 기준선 안 여백 사용법 - 모든 여백 설정 margin: 값px; 좌,우,상,하 모두 여백 생성 - 모든 여백 설정 padding: 값px; - 특정 여백 설정 margin-top: 값px; margin-left: 값px; margin-right: 값px; margin-bottom: 값px; - 특정 여백 설정 padding-top: 값px; padding-left: 값px; padding-right: 값px; padding-bottom: 값px; 여백연습 여백연습 여백연습 여백연습 여백연습 여백연습 오늘은 수요일 내일은 목요일 즐거운 금요일 신나는 토요일 불타는 일요일 우리은행 국..
2021.01.13 -
[CSS] 2021.01.12. DAY_54 CSS 속성
◎ CSS 속성 속성부여 "속성명:값" 의 문법을 사용한다 [ 글자속성 ] [ 글꼴변경 ] font-family: 적용글꼴; font-family:적용글꼴, 적용글꼴, 적용글꼴,,, [ 진하게 ] font-weight: 값; /* 값 : bold - 진하게 , normal - 일반 */ [ 색 ] color: 색; /* 색 : 색을뜻하는 영단어, RGB */ [ 이텔릭체 ] font-style: italic [ 밑줄 ] text-decoration: 값; /* 값 : none - 밑줄없음, underline - 밑줄, overline - 윗줄, line-through - 취소선 */ [ 크기 ] font-size: 크기px; /* 단위 : px(고정), %, em(가변) */ [ 정렬 ] text-ali..
2021.01.12 -
[CSS] 2021.01.12. DAY_54 CSS란? 사용방식(inline, embed, external file), selector종류
◎ CSS란? CSS Cascading Style Sheet 1994년에 하콤 비움 리(Hakon wium lie)가 처음 제안 Weg Page에서 통일성 있는 디자인을 하기 위한 고안 inline, embed, external file방식 3가지 방식으로 사용할 수 있다 selector를 사용하여 디자인을 적용받을 tag를 설정한다 CSS3가 최신 표준이다 주석 : /* */ 로 한줄 주석과 여러줄 주석으로 사용할 수 있다 [ 1. inline 방식 ] 태그에 직접 CSS코드를 정의하는 방식 적용우선순위가 가장 높다 디자인 코드를 태그마다 정의해야한다 (중복성) selector를 사용하지 않는다 문법) inline 방식 inline 방식은 코드의 중복성이 높다 [ 2. embed 방식 ] div 로 묶..
2021.01.12