728x90 반응형 Java Web Programming/1. HTML | CSS4 [CSS] CSS Position (relative, absolute) 한 방에 정리! 목차 1. Position 속성 1-1. Relative 1-2. Absolute 1-2-1. 부모 relative & 자식 absolute 1-2-2. 조상 relative & 자식 absolute 1-2-3. 조상 position 없음 & 자식 absolute 1-3. Fixed CSS Position CSS Position 요약 position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 사용법은 간단하다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top: 50px;) 🎈알아두기 block inline block : 한 줄 모두 차지 (대표 element - ,.. 2021. 2. 2. [CSS] CSS 기초 (selector, table, 링크 href, div/span) 1. Selector class를 지정할 때는 .(class명)으로 지정한다. 기본 문법 예시 css는 웹사이트의 디자인 스타일을 담당한다 html은 웹페이지의 컨텐트를 담당한다 javaScript는 웹페이지의 동작을 담당한다 JSP는 동적인 서버 웹페에지를 담당한다 2. table 기본 문법 예시 자기소개 이름 피터 특기 인형극 노래 코딩 번호 제목 작성자 조회수 1 오후수업 불리언 355 2 오전수업 인티저 500 3. 링크 (href) : css style을 따로 css파일로 만들어서 불러와서 사용 가능하다 기본 문법 예시 /mystyle.css @charset "UTF-8"; table { border-collapse: collapse; } table, td { border: 1px solid b.. 2020. 8. 19. [HTML] HTML 기초 (이미지, 링크, 리스트, 테이블) body tag내 html을 통해 데이터 삽입하기 1. 이미지 삽입 기본 문법 예시 ~생일 축하합니다~ tag : direction 옵션을 통해 위, 아래, 왼쪽, 오른쪽으로 텍스트 및 이미지를 움직이며 웹 페이지에 표현할 수 있다 tag : 글씨의 size 및 color 등의 옵션을 줄 수 있다. tag : img를 삽입할 수 있다. * 이때 image_path는 html 파일을 중심으로 위치를 지정해야 한다. 2. 링크 기본 문법 예시 step1-hello 페이지로 이동 step3 페이지로 이동 다음 페이지로 이동 3. 목록 태그 ol (ordered list) : 순서가 있는 리스트 태그 ul (un-ordered list) : 순서가 없는 리스트 태그 li : ol과 ul안에 있는 리스트 요소 태.. 2020. 8. 19. [HTML] HTML 기본 개념 정리 (+Javascript, CSS, XML) HTML : 웹문서의 컨텐츠 (의미, 구조) CSS : 웹 문서의 디자인(스타일) JavaScript : 웹 문서의 동작 HTML : HyperText Markup Language → 웹 문서의 화면 구성을 정의하는 언어 HTML 필요 시 참고 사이트 참고 사이트 : www.w3schools.com W3Schools Online Web Tutorials HTML Example: This is a heading This is a paragraph. Try it Yourself » CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: ce www.w3schools.com HTML 기본 구성 예제 Hello HTML .. 2020. 8. 18. 이전 1 다음 728x90 반응형
