HTML
-
자바스크립트 기본 문법HTML 2023. 10. 26. 17:34
기본 용어 표현식: 값을 만들어 내는 간단한 코드 문장: 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위 문장 마지막에 세미콜론(;) 또는 줄 바꿈을 넣어 종결을 나타냄 273; 10 + 20 + 30 * 2; var name = '윤' + '인' + '성'; alert('Hello JavaScript'); 문장 예 273 10 + 20 + 30 * 2 'JavaScript' 표현식 예 키워드 자바스크립트를 처음 만들 때 정해진 특별한 의미가 부여된 단어 식별자 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어 키워드 사용 x 특수 문자는 _와 $만 허용 숫자로 시작하면 x 공백 입력 x 구분 단독으로 사용 다른 식별자와 함께 사용 식별자 뒤에 괄호 x 변수 속성 식별자 뒤에 괄호 o ..
-
연습 예제HTML 2023. 10. 20. 17:30
연습 문제 1 기업 연혁 2018 ~ 현재 환경과 사람을 존중하는 기업 '환경 사랑' 환경 관련 우수기업 대통령상을 수상하다. 2021 환경사랑 수원 전시장 오픈 2020 환경사랑 광주 전시장 오픈 2019 환경사랑 대전 전시장 오픈 2018 환경사랑 서울 전시장 오픈 연습 문제 2 아직 푸는 중... 알림 8월 3일 쿠킹 클래스 연기합니다. 09.30 8월 3일 쿠킹 클래스 연기합니다. 09.30 8월 3일 쿠킹 클래스 연기합니다. 09.30 8월 3일 쿠킹 클래스 연기합니다. 09.30 8월 3일 쿠킹 클래스 연기합니다. 09.30 자유 게시판 안녕하세요. 반갑습니다. 09.30 안녕하세요. 반갑습니다. 09.30 안녕하세요. 반갑습니다. 09.30 안녕하세요. 반갑습니다. 09.30 안녕하세요. 반..
-
요소 배치HTML 2023. 10. 19. 17:33
절대 위치를 사용한 요소 배치 자손의 position 속성에 absolute 키워드를 적용하려면 부모에 height 속성을 입력 Dommy Text Dommy Text .circle { position: absolute; width: 100px; height: 100px; border-radius: 40% 40%; } border-radius 숫자 줄이면 덜 동그란 원 만들 수 있음 위 기능 이용해 CSS로 오륜기 만들기 요소 중앙 배치 요소의 중앙 배치 요소를 고정 위치에 배치 고정 바 배치 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lore..
-
수평, 중앙, One True 정렬 레이아웃HTML 2023. 10. 19. 15:22
수평 정렬 레이아웃 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas totam magnam molestiae quas, eaque in voluptatum labore consequatur necessitatibus accusamus. Esse, dignissimos expedita laudantium dolor atque mollitia eos consequatur libero! 메뉴 - 1 메뉴 - 2 메뉴 - 3 메뉴 - 4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, perferendis sed quam optio ullam nobis voluptas..
-
CSS3 속성HTML 2023. 10. 6. 17:37
박스 속성 margin 속성 테두리와 다른 태그 사이의 테두리 바깥쪽 여백 border 속성 테두리 padding 속성 테두리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용 width 속성 글자를 감싸는 영역의 가로 크기 height 속성 글자를 감싸는 영역의 세로 크기 전체 너비 = width+ 2x(margin+border+padding) 전체 높이 = height+ 2x(margin+border+padding) width, height 적용 margin, padding 속성 적용 흰 margin 검 border 빨 padding 네 방향 속성 지정 두 방향씩 속성 지정 Lorem ipsum dolor amet 기본 테두리 만들기 둥근 테두리 border-radius: 20..
-
CSS3 기초: 선택자와 단위HTML 2023. 10. 5. 17:30
css 선택자 종류 http://www.w3.org/TR/CSS CSS Snapshot 2023 Abstract This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023. The primary audience is CSS implementers, not CSS authors, as this definition includes modules by sp www.w3.org 종류 형태 설명 전체 선택자 * HTML 페이지 내부의 태그 모두 선택 태그 선택자 태그 HTML 페이지 내부의 특정 태그 모두 선택 아..
-
HTML 입력 양식 태그, 구조화HTML 2023. 10. 5. 14:57
입력 양식 태그 HTML5 문서 구조화 공간 분할 태그 블록 형식 태그 인라인 형식 태그 div 태그 span 태그 h1~h6 태그 a 태그 p 태그 input 태그 목록 태그 글자 형식 태그 테이블 태그 입력 양식 태그 시맨틱 태그 태그 설명 header 머리말(페이지 제목, 페이지 소개) nav 하이퍼링크들을 모아 둔 내비게이션 aside 본문 흐름에 벗어나는 노트나 팁 section 문서의 장이나 절에 해당하는 내용 article 본문과 독립적인 콘텐츠 영역 footer 꼬리말(저자나 저작권 정보) 텍스트 가운데 정렬 div 안에 text-align: center; 표 가운데 정렬 table 안에 margin-left: auto;margin-right: auto; 회원가입 서식 작성 회원등록 회원가..
-
HTML5 기본HTML 2023. 9. 21. 17:30
인터넷: 전 세계를 연결하는 국제 정보 통신망 · 컴퓨터나 스마트폰 같은 디지털 기기로 연결되어 정보를 공유하는 공간 웹: 인터넷 공간에서 제공하는 서비스 클라이언트(사용자): 요청하는 쪽, 웹 페이지를 제공받는 일반 사용자 서버(제공자): 응답하는 쪽, 네이버나 다음 등 웹 서비스를 제공하는 기업 서버 프로그램: 사용자와 먼 곳에 있으므로 백 엔드 프로그램 클라이언트 프로그램: 사용자와 가까운 곳에 있기 때문에 프런트 엔드 프로그램 HTML5 기본 용어 태그와 요소 요소: HTML 페이지를 구성하는 각 부품 · 제목, 본문, 이미지 등이 모두 요소 · 자바스크립트 개발에서는 요소를 객체(object)라고도 함 태그: 요소를 만들 때 사용하는 작성 방법 · 흔히 요소와 태그를 구분하지 않고 사용 내용을 ..