본문 바로가기

html-css

 (13)
css기초2 선택자 예제 헤드라인1은 무슨 색? 헤드라인2는 무슨 색? h2 class="ex"는 무슨 색? p class="ex"는 무슨 색? p태그는 무슨 색? 실행결과 설명 선택예제 div a p a2 p2 p3 span 선택된 요소의 텍스트를 Red색상으로 변경합니다. 전체선택 * 로 선택 가능하며 우선순위는 제일 낮다. 태그명 div, p, span등 태그 이름으로 선택 부모선택자 보다 우선순위가 높다. 클래스 태그에 클래스를 설정하여 사용하는 방식으로 클래스명 앞에 . 을 붙여 선택 ex) .div로 사용하며 부모선택자나 자신의 태그명보다 우선순위가 높다. 아이디 태그에 아이디를 설정하며 사용하는 방식으로 아이디앞에 # 을 붙여 선택 ex) #div 사용하며 부모선택자나 자신의 태그명, 클래스 보다 우선순위가 높..
css기초1 color, border, margin, padding 예제 margin : 요소와 요소간의 간격, 즉 바깥여백을 의미 padding : 요소 안, 내부 여백을 의미 background-color : "skyblue"; border : solid 3px blue; margin : 10px; padding : 0px; border: solid 3px purple; margin : 20px; padding : 20px; border: solid 3px green; margin : 10px 20px 30px 40px; border: solid 3px yellow; padding : 10px 20px 30px 40px; border: solid 3px red; 실행결과 설명 color background-color 글자과 배경색을 변경해준다. 방식은 RGB기반으로 ..
HTML div 태그 예제 div id = "header" div id = "nav" div id = "aside" div id = "content" div id = "footer" 실행결과 설명 division의 약자로 주로 웹페에지의 레이아웃(구역)을 나누는데 사용된다. header header은 주로 웹페이지의 로고, 로그인 등 주로 제일 상단에 위치해 있으며 대부분 nav를 포함하고 있다. nav navigation links로 주로 공지사항, 자유게시판, QnA등 웹페이지를 이동할때 필요한 메뉴들이 모여있다. aside aside가 지워져도 본문에 영향을 끼치지 않는 컨텐츠를 집어넣는곳 ex)광고 content content는 웹페이지의 주요 컨텐츠(내용)을 보여주는 영역이다. html5에서는 section과 art..
HTML 기초10 인라인요소 ,블록요소 예제 블록요소와 인라인 요소의 기본원리와 규칙 블록요소는 기본적으로 줄바꿈이 일어나는 형태 영역의 너비가 상위영역의 전체너비만큼 되는 형태 블록요소에 포함되는 요소는 h#, p, div태그 등이 있다. 블록 요소 p태그는 블록 요소입니다. div태그도 블록 요소입니다. 인라인 요소 인라인 요소는 블록요소와 반대되는 형태로 줄바꿈이 일어나지 않는 요소들 입니다. 인라인 요소로는 a, img, strong, span태그 등이 있습니다. 이 요소는 strong요소 입니다. 링크가 있는 a요소 역시 인라인 요소입니다. 이 요소는 span요소 입니다. 이것은 p태그 안에 있는 span태그입니다. 블록요소와 인라인요소의 규칙 대부분의 요소는 같은 형태의 다른 요소를 포함할 수 있다. (블록 요소 안에 블록요소, 인..
HTML 기초9 input태그 예제 type="text" & type="password" 텍스트 & 암호타입 아이디 : 비밀번호 : type="button" 버튼타입 확인2 type="raido" 라디오버튼 성별 : 여자 남자 type="checkBox" 체크박스 일정 : 월 화 수 목 금 토 일 type="hidden" 숨김 정보 type="file" 파일 업로드 type="date" 날짜선택 type="color" 색상선택 type="email" 이메일 type="select" 선택 사과 딸기 바나나 오렌지 실행결과 설명 Input태그를 사용할 때 필요한 태그로 클라이언트(사용자)가 작성한 데이터를 웹서버로 전송 해주기 위한 태그 옵션으로 action, method 가 있다. action 속성은 태그안 에서 작성된 내용이 도착할 ..
HTML 기초8 table, tr, th, td 태그 HTML 기초8 talbe, tr, th, td 태그 예제 현재 상영중인 영화정보 구분 영화정보 영화 제목 세부 정보 등급 상영 시간 겨울왕국 애니메이션 전체 관람가 108분 모험 판타지 겨울왕국2 애니메이션 전체 관람가 103분 모험 판타지 출처 네이버 영화정보 실행결과 설명 테이블 구조 태그 테이블 자체 제목 태그 테이블 행 태그 테이블 열 태그 테이블 제목 기본속성으로 가운데 정렬과, bold 속성을 가짐 rowspan="" 행 병합 ex) 파란 박스안에는 행이 3개지만 빨간 박스안은 행이 1개로 합쳐짐 colspan="" 열 병합 ex) 파란박스안에는 열이 4개지만 빨간 박스안은 열이 1개로 합쳐짐 border-collapse: collapse; 값을 주면 테이블 선이 두줄에서 합쳐져 한줄로 변함..
HTML 기초7 img, video 태그 HTML 기초7 img, video 태그 예제 동영상이 나오지 않으면 출력되는 메시지 실행결과 설명 이미지 삽입을 위한 태그 이미지의 가로 크기를 조정이 가능한 속성 이미지의 원본비율 유지를 위해 width 속성으로만 크기조절 권장한다. 동영상 삽입을 위한 태그 태그는 닫는 태그가 있으며 태그 사이에 내용을 입력하면 동영상 재생이 안될 때 메시지가 대신 출력된다. controls 속성은 동영상 재생, 볼륨조절등 동영상 재생에 필요한 컨트롤러를 제공함 src="" src : source의 약자로 외부 파일의 URL을 입력받는 속성이며 에선 이미지의 URL을 의미하고 에선 동영상의 URL을 의미한다. 다른 웹페이지에서 가져오는 방법과 사용자의 서버에 있는 이미지URL을 입력해 가져오는 방법이 있다. 다른 웹..
HTML 기초6 ul, ol, li태그 HTML기초 6 ul, ol, li 목록태그 예제 ol과 ul의 사용 1일차 HTML이란? HTML의 기본 구조 2일차 CSS 스타일적용 ol과 ul을 사용한 예제 신입 사원 모집 공고 IT계획, 개발 부서에서 함께 할 신입 사원을 모집합니다. 모집 직군 : 웹개발, 응용프로그래밍 직무 내용: 스프링, 자바를 사용한 웹개발(신입도 지원가능) 개발회의 프로젝트 참여 접수 마감일 : 2022. 7. 21 자세한 내용은 공지게시판을 참고해주세요 실행결과 설명 unordered list 태그로 순서없이 도형형태로 표현한다. ordered list 태그로 숫자나, 알파벳등으로 순서대로 표현한다. ul과 ol 태그 안에서 사용되며 list의 약자로 목록을 만든다. 의 속성 흰색 동그라미 네모 의 속성 기본값으로 아..

티스토리툴바