◎ 그림자 설정 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: 좌상단값 우상단값 우하단값 좌하단값; 값의 위..

◎ 레이아웃 설정해보기 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..

◎ 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. 좌표설정 좌표를 설정하여 원하는 위치에 보내기 사용) ..

◎ 여백 데이터를 보여주기 전에 생기는 간격 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; 여백연습 여백연습 여백연습 여백연습 여백연습 여백연습 오늘은 수요일 내일은 목요일 즐거운 금요일 신나는 토요일 불타는 일요일 우리은행 국..

◎ 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..

◎ 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 로 묶..

[ 10. HTML5에 추가된 Form Control] IE에서는 거의 동작하지 않는다

[ 9. HTML Form Control ] java.swing의 컴포넌트 == html의 form control [ label , Titledborder, fieldset ] 먼저, label이라는 개념을 알고 넘어가자. label은 java.swing의 컴포넌트 label과 같은 의미로 사용된다 - input 태그 등의 이름을 알려줄 때 일반텍스트대신 사용하는 개념이다 이름표 - 제목을 가진 테두리를 만들 때 - 태그 안에서 사용한다 [ 1_ input 태그] 접속자의 정보를 받기 위해 제공하는 HTML의 객체들 의 객체가 제공된다 입력된 정보는 태그를 사용하여 Back-end로 전송할 수 있다 태그속성들 - 속성 - readonly = "readonly" : 사용자가 편집할 수 없다 - Back-e..

[ 흘러가는 문자 - marquee ] 내용 방향 left : default / 왼쪽에서 오른쪽으로 동작 slide : default 동해안 오징어떼와 물고기 출몰! =:> <:= <@3333< <:= <:= @-<--

2021/01/06 - [Web/HTML] - [HTML] 2021.01.06. DAY_50 태그 : 태그란?, 태그 종류 2021/01/07 - [Web/HTML] - [HTML] 2021.01.06. day_50 태그사용 1. _ 줄변경, 글자, 글꼴, 특수문자,heading, 목록, 선긋기 태그 2021/01/07 - [Web/HTML] - [HTML] 2021.01.07. day_51 태그사용 2. _ 이미지, 링크 태그, frame(frame, iframe) 2021/01/07 - [Web/HTML] - [HTML] 2021.01.07. day_51 태그복합사용 연습) 이미지 + 링크태그 사용 [ 8. 테이블 - 표만들기] 표를 만드는 이유 : 데이터를 보기좋고, 읽기좋게 만들기 위해 사용한다 ..