HTML 작성 순서 1. 칸 나누어준다. (div 갯수 파악하고 작성한다.) 2. 부모안에 자식 갯수 파악하고 나누어준다. 3. 각 칸에 요소값 부여한다. (id or class) CSS 순서 1. UI 구조분석한다(네모로 칸 구별함) 2. HTML 코드 생산 3. *(Universal Code)로 상속시킬 값 작성 (*는 전체에 상속됨) 4. Tag 선택 5. 부모 / 자식 관련 설정 부여 5-1 부모의 경우 display, justify-content, align-items 값을 부여한다. 5-2 자식의 경우 position, padding, margin으로 세부 위치 조정한다. HTML hi! 안녕하세요! Contact Me Service Offers 안녕하세요 저의 기술 스펙을 전달해드리겠습니다...
- 가시성 속성 어떤 요소를 보이게 하거나 반대로 보이지 않게 할 때 사용한다. ex ) visibility : hidden; (자리를 차지함) - 디스플레이 속성 가시성 속성과 반대로 요소가 차지하는 공간도 사라진다. ex ) display : none; (존재자체가 없음) display - none : 사라진다. - inline : 가로배치 (width , height X) - blcok : 세로 배치 (width, height O) - inline-block : 가로배치 + width , height (가로배치+크기조절) - 블록 형식 다음 요소가 항상 새로운 행에서 시작되며 화면의 최대 너비만큼 차지한다. - 인라인 형식 다음 요소가 이전 요소 바로 뒤에 배치되며 최소한의 너비만 가진다. 예제 8..
작성 절차 1. HTML 코드 작성 2. 가로 / 세로 배치 - 정렬 : 부모 → 자식 (display:flex; 자식을 가로 세로 정렬한다.) - 정렬 : 자기자신(스스로 위치 잡음) position : relative, absolute margin, padding 3. width X / height X (자기자신꾸미고 text 꾸밀때 사용) 4. background-color 주기 HTML itedunet Home Serviceoffers Skills Work Testimonials Contact CSS *{ font-family: 'Hahmlet', serif; list-style: none;/*li의 스타일을 없앰*/ margin: 0px; padding: 0px; /*margin과 padding..
- z-index - 한 요소 위에 다른 요소를 쌓을 때 사용 - z-index 속성값이 작을수록 아래에 쌓임 (z-index:3은 3층으로 보고 z-index:1이면 1층으로 생각하면됨 그럼 3층 사이에 위치하게 됨) 예제 7-17 HTML 코드 box #1 box #2 box #3 CSS 코드 #box1{ position:absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: blue; z-index: 3; } #box2{ position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: yellow; z-index: 2; } #box3{ pos..
- StringBuilder StringBuilder는 문자열을 효율적으로 처리하기 위한 클래스이다. String과 유사한 기능을 제공하지만, 문자열을 변경하거나 조작할 때 발생하는 불필요한 객체 생성과 복사를 최소화하여 성능을 향상 시킬 수 있는 장점이 있다. 가변적인 크기의 문자열을 처리할 수 있으며, 제공하는 메서드가 있다. append(String str) 문자열을 현재 StringBuilder 객체 뒤에 추가한다. inser(int offset, String str) 지정된 위치에 문자열을 삽입한다. deleter(int satrt, int end) 지정된 범위의 문자열을 삭제한다. replace(int start, int end, String str) 지정된 범위의 문자열을 다른 문자열로 대체..
package gg; import java.time.LocalDate; import java.time.LocalDateTime; import java.util.Calendar; public class juk { public static void main(String[] args) { Calendar C = Calendar.getInstance(); int y = C.get(Calendar.YEAR); int M = C.get(Calendar.MONTH)+1; int d=C.get(Calendar.DATE); int hour=C.get(Calendar.HOUR_OF_DAY); int m = C.get(Calendar.MINUTE); int s = C.get(Calendar.SECOND); System.ou..
- UI 요소 상태 가상 클래스 선택자 - 입력 폼의 상태를 선택할 때 사용한다. UI 요소 상태 가상 클래스 선택자의 종류 사용 방법 의미 E:enabled 사용 가능한 폼 컨트롤 E를 선택한다. E:disabled 사용 불가능한 폼 컨트롤 E를 선택한다. E:checked 선택된 폼 컨트롤을 선택한다. E:focus 초점이 맞추어진 input 태그를 선택한다. 기타 가상 클래스 선택자 선택자 이름 사용 방법 의미 언어 선택자 E:lang(ko) HTML lnag 속성의 값이'ko'로 지정된 태그를 선택한다. 부정 선택자 E:not(S) S가 아닌 E 태그를 선택한다. 목적 선택자 E:target E의 url이 요청되면 선택한다. 가상 엘리먼트 선택자 E::firt-line E 태그의 첫번째 라인을 선..
Section 6. CSS 사용법과 선택자 1. CSS3 개요 - CSS3의 구성 - 선택자(Selector) : 스타일 시트를 적용할 대상을 지정한다. - 속성(Property) : 어떤 속성을 적용할지 선택한다. - 속성값(Value) : 속성에 어떤 값을 반영할지 선택한다. h1 { color: blue; front-sxie: 120px;} h1 : 선택자 color, fornt-size : 속성 blue;, 12px : 속성값 {} : 중괄호는 내용을 뜻한다. 2. CSS3 기본 사용법 - CSS의 정의 문법 div { width : 960px; } div : 선택자 width : 속성 960 : 속성값 px : 단위 : : 콜론 (HTML의 = 와 같은 역할) ; : 세미콜론 - CSS의 적용 ..
- Total
- Today
- Yesterday