728x90 반응형 자율학습단19 [ HTML + CSS + 자바스크립트] 6.3 ~ 6.4 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.3) 박스 모델을 구성하는 속성 다루기 - margin -border -padding -content 속성값 (4) margin-top margin-right margin-bottom margin-left 순으로 값을 의미함 - margin 적용 예시 - : margin과 달리 여러 속성값이 복합적으로 사용 p { border-width:2px; } - border-width 속성 - : 테두리 굵기 p { border-width:2px; border-style:dotted; } h1 { border-style; } h2 { line-height: 16px; } h3 { line-height: .. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.2 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.2 ) 텍스트 속성으로 텍스트 꾸미기 1. font - family : 글꼴 지정 : 쉼표로 구분 : 한글 또는 공백있는 글꼴명은 큰따옴표로 감싸야 함 2. font - size : 일반적인 텍스트 크기 = 16px 3. 숫자표기법 (font-weight) : 100 - 최소 굵기 900 - 최대 굵기 4. 키워드표기법 (font-weight) 5. font-style 6. font-variant : 텍스트를 크기가 작은 대문자로 변환 7. text-align : 텍스트를 정렬 8. text-decoration : 텍스트에 선 긋기 : a 태그와 같이 사용 가능 9. letter-spacing : 글자 사이 간격 조절 10. lin.. 2023. 4. 1. [ HTML + CSS + 자바스크립트] 6.1 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.1) CSS의 특징 살펴보기 HTML 태그 : 태그 자체에 꾸밈을 담당하는 역할이나 기능X 하지만, 기본스타일시트가 내장 되어있으면 꾸며진 것처럼 보일 수 O (ex: hn태그) 스타일 적용은 웹브라우저에 내장된 기본스타일시트 스타일보다 사용자가 지정한 스타일 속성이 우선 적용된다 그리고 단계적 적용이 된다 = 같은 태그에 스타일 여러개가 있으면 결국 마지막에 적힌 스타일만 적용 결론: 마지막에 작성된 스타일 >사용자 정의 스타일 > 기본 스타일 시트 : 같은 태그에 중복해서 스타일이 지정될 때 사용 : 선택자를 분류해서 개수를 세고 점수를 곱해 합을 구해서 우선순위를 판단한다 선택자의 개별성 점수가 똑같을 땐 나중에 작성된.. 2023. 3. 26. [ HTML + CSS + 자바스크립트] 5.3 ~ 5.5 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 5.3 ) 가상 요소 선택자 사용하기 : 명시적으로 작성된 구성요소는 아니지만 존재하는 것처럼 취급해 선택하는 선택자 지정방법 :: 기호(콜론2개)를 붙여서 사용하고, 기준 선택자와 함께 사용. - before 선택자- : 기준선택자 요소 앞의 공간을선택 - after 선택자- : 기준선택자 요소 뒤의 공간을 선택 - content 속성 - : before 선택자와 after 선택자에서만 사용하는 속성 : 새로운 콘텐츠 만들거나 추가할 때 사용한다 - 가상 요소 선택자 활용 예시 - : p (기준선택자)를 기준으로 앞(before), 뒤(after)에 요소가 있는 것 처럼 선택, 그리고 content 속성을 통해 텍스트를 추가했다.. 2023. 3. 25. [ HTML + CSS + 자바스크립트] 4.1 ~ 5.2 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 4.1 ) CSS 문법 살펴보기 h1{color:red;} 선택자와 선언부 color - 속성 red - 값 ; (세미콜론) - 넣으면 연속해서 스타일 작성 가능 4.2 ) CSS 적용하기 - CSS 적용 방법 (3) - 1. 내부 스타일 시트 html 문서에 태그 사용 2. 외부 스타일 시트 새로운 css 파일 생성 (확장자 .css) html 파일에 css 파일 연결 (link 태그 사용) html 파일과 css 파일 연결된 상태 확인 3. 인라인 스타일 사용 : html 문서에 있는 태그에 직접 CSS 코드 작성하는 방법 선택자 부분 필요없음 5.1 ) 기본 선택자 사용하기 : 모든 요소 선택 p 태그 지정하면.. 2023. 3. 21. [ HTML + CSS + 자바스크립트] 3.8 ~ 3.10 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 3.8 ) 멀티미디어 설정하기 : 항상 src 속성과 함께 사용 control 속성 - 웹 브라우저에 노출 : audio 태그와 같음 : audio 태그와 video 태그에서 파일의 경로와 미디어 타입 명시 audio 태그와 video 태그의 자식요소로 사용 source 태그 사용시 audio 태그와 video 태그에는 src 속성 쓰지 않음 3.9 ) 웹 페이지 구조를 설계하는 시맨틱 태그 시맨틱 웹: 기계도 쉽게 이해할 수 있는 웹 페이지 설계 table, form, a태그 - 시맨틱 태그 : 웹 페이지의 헤더 영역 구분하는데 사용 < .. 2023. 3. 20. [ HTML + CSS + 자바스크립트] 3.7 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 3.7 ) 표 만들기 : 표 관련 태그 : 내가 만들려는 표의 제목 지정 : 행(가로) 생성 행 여러개 생성 가능 : 열(세로) 생성 th - 제목 td - 데이터 : 제목 데이터 th 태그가 td 태그보다 더 굵게 출력된다 tr - 가로 행 3개 th - 오른쪽으로 차례대로 나열 (번호 / 상품 / 수량 / 가격) - 셀 병합 - : 행과 행 병합 행끼리 병합된다 (세로로) : 열과 열 병합 (오른쪽으로 병합) : 헤더 영역 해당 th 태그로 열을 생성해야 한다 .. 2023. 3. 19. [ HTML + CSS + 자바스크립트] 3.6 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 3.6 ) 폼 구성하기 action, method 속성을 함께 사용 action - 전송할 서버의 URL 주소 method - 서버에 전송할 때 송신 방식 get 또는 post를 사용한다 type 속성 - 필수로 작성 상호작용 요소 종료 결정 name, value - 필수X, 선택적 사용 - type 속성 - 적용 적용 - name 속성 - 입력요소의 이름 작성 - value 속성 - 입력요소의 초깃값 작성 - 암묵적 방법 - 명시적 방법 - 암묵적 + 명시적 1. 암묵적 방법 : label 태그에 상호작용 요소를 포함하는 방법 (위의 예시는 라벨이라는 태그 안에다가 상호작용 요소를.. 2023. 3. 19. [ HTML + CSS + 자바스크립트] 1.2 ~ 3.5 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 1.2 ) 첫 번째 HTML 문서 만들기 파일 이름 작성할 때 끝에 .html 붙이고 작성하기 2.1 ) HTML의 기본 구성요소 ●속성: 속성 = 옵션 태그랑 같이 쓰임. 단독 사용X ●요소: + 콘텐츠 + 2.2) HTML의 기본구조 ● html 태그: HTML 문서의 시작과 끝 3.1) HTML의 특징 파악하기 - hn 태그 - 중간에 숫자를 건너뛰지말고 단계적으로 사용 - p 태그 - 문단 작성할 때 사용 - br 태그 - 줄바꿈 - blockquote 태그 - 인용한 문단 단위의 텍스트 작성때 사용 cite 속성으로 출처 경로 명시 태그 안에 반드시 한 개의 태그 들어가야 한다 - q 태그 - 짧은 인용문 작성할 때 사용 blockquote 태그.. 2023. 3. 12. 이전 1 2 3 다음 728x90 반응형
