본문 바로가기

html+CSS+JS/html+CSS

html+CSS+JS/html+CSS 2019. 6. 27. [CSS] 선택자:특정 상태 (hover, visited, focus, active) 1. 마우스를 올렸을 때 선택자:hover {스타일 내용} 적용 스타일값 - font-weight: 글자 두께 / font-shadow: 글자 그림자 (상하,좌우,번짐정도,색상) 2. 링크가 연결된 경우, 한 번 클릭해서 해당 링크 들어갔다 나왔을 때 선택자:visited {스타일 내용} 적용 스타일값 - font-weight: 글자 두께 / font-shadow: 글자 그림자 (상하,좌우,번짐정도,색상) 3. 커서가 올라가있을 때 (Tab키를 누르면 선택이 달라지는 때) 선택자:focus {스타일 내용} 적용 스타일값 - font-weight: 글자 두께 / font-shadow: 글자 그림자 (상하,좌우,번짐정도,색상) 4. 마우스로 클릭했을 때 선택자:active {스타일 내용} 적용 스타일값 - ..
[CSS] position: absolute, relative의 연관성
html+CSS+JS/html+CSS 2019. 6. 25. [CSS] position: absolute, relative의 연관성 position:relative 1 2 3 부모 요소에 position:relative가 들어가는가? 부모 요소에 position:relative가 안 들어간 경우(좌) 부모 요소에 position:relative가 들어간 경우(우)
[CSS/기초] 기본 설명 + 글상자 만들기
html+CSS+JS/html+CSS 2019. 6. 24. [CSS/기초] 기본 설명 + 글상자 만들기 css html에 디자인을 부여. css는 기본적으로 head안에 style 혹은 link를 통해 표현합니다. 간단한 것을 표현할 때엔(연습같은 상황) style을 사용합니다. 많은 내용을 만들 때엔 별도의 css파일을 만든 후, link코드에 href 속성을 이용하여 주소를 넣고 rel속성을 이용해 stylesheet라는 속성값을 넣습니다. 선택자 { 속성: 속성값 ; } 선택자에 속성값만큼의 속성을 넣는다는 의미입니다. 중괄호( {} )는 여러가지 속성을 한꺼번에 부여할 때 사용합니다. 세미콜론( ; )은 중괄호 내에서 속성을 분리할 때 사용합니다. Chocolate YUMM! 초콜릿은 카카오 콩을 재료로 가공한 식품입니다. 숙성한 카카오콩을 볶은 뒤 이를 갈아서 만든 카카오 매스와 지방 성분만으로 ..
[html/기초] html 내부에 메모(/* */ , <!-- -->)
html+CSS+JS/html+CSS 2019. 6. 24. [html/기초] html 내부에 메모(/* */ , <!-- -->) /* 내용기입 */ : head 태그 내부에 메모 : body 태그 내부에 메모 Example
html+CSS+JS/html+CSS 2019. 6. 20. [html/기초] 용어랑 기초 : html5 웹 표준을 표준 명령으로 해석하겠다는 말. 시작할 때에 씀. 쓰지 않은 경우 명령 해석이 안 될 수 있음. : html 태그 (doctype을 제외한 모든 코드는 과 사이에 들어간다) lang: 이 페이지의 언어 속성. 한글=ko, 영어=en 등 각 나라 이름의 앞 2글자. : 헤드. 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보 입력. 즉, 지시사항 입력. 헤드 내부 주요 요소 : 문자 인코딩 설정. 코드는 주로 utf-8을 사용한다. 내용 적기 : 탭 이름 : 탭 이름 왼쪽에 붙는 파비콘(작은 정사각형 이미지). : css 외부 파일 적용. css 내용 적기 : css 내부에서 적용. : java script 외부 파일 적용. : 몸통글(바디). 문서의 내용이 들어감. 바디..
[html/기초] 기입창 종류 (input, text, checkbox, select 등)
html+CSS+JS/html+CSS 2019. 6. 20. [html/기초] 기입창 종류 (input, text, checkbox, select 등) 1. 글자 기입창 추가 코드 - fieldset: 감싸는 상자 만들어줌 / legend: fieldset의 제목 / label: 텍스트와 기입창 함께 라벨링. 사용 속성 - placeholder: 기입하려고 클릭하면 사라지는 글씨 기입용 이름 기입용 이름 2. 체크박스 사용 속성 - selected: 미리 선택해둠 사과 바나나 복숭아 망고 사과바나나복숭아망고 3. 숫자 기입창 추가 코드 - small: 글자 크기 줄이기 사용 속성 - min: 숫자 최소값 설정 / max: 숫자 최대값 설정 / value: 기본값 설정 구매개수 1인당 최대 5개까지 구매개수 1인당 최대 5개까지 4. 1개 단일 선택 사용 속성 - name: 같은 이름들을 하나의 그룹으로 묶어 그 중 하나만 선택할 수 있도록 만들어줌. /..
[html/기초] 체크상자, 기입란 만들기 (input, form, fieldset, legend)
html+CSS+JS/html+CSS 2019. 6. 19. [html/기초] 체크상자, 기입란 만들기 (input, form, fieldset, legend) 와 사이에 들어가는 내용입니다. : 서버로 보내줄 애들을 따로 묶어 표시 : 기입란을 하나로 묶는 상자 만들기 제목 내용 : 기입란 상자의 제목 내용기입 : 주로 for와 쓰임. 내용에 라벨을 붙여줌. id : 기입란 생성. type을 통해 여러 형태를 만들 수 있음. text checkbox number radio (with name) time date 텍스트 기입란 체크박스 숫자 1개만 선택 시간 선택 일자 선택 button submit reset color range password /email 버튼 만들기 서버로 제출 재입력(내용 지우기) 색상환 中 선택 상중하 적합 해당 형식 요구 : 체크상자/기입란 닫기 : 기입란 묶는 상자 닫기. : 서버로 보낼 목록 닫기. : 처럼 사이에 있는 코드들을 하..
[html/기초] 이미지나 문구에 링크 걸기 (a href, target, blank, id)
html+CSS+JS/html+CSS 2019. 6. 18. [html/기초] 이미지나 문구에 링크 걸기 (a href, target, blank, id) 텍스트 문구 or img src 사용 : anchor. 이하의 항목으로 이동할 것이다. hypertext reference. 하이퍼링크(웹사이트 주소) 특정 문구나 이미지에 사이트 링크 만들기. : target. 새 창에 넣을 수 있음. id="id 이름" : 해당 코드에 아이디 부여. 1개씩만 있어야 함. : 해당 아이디를 가진 코드가 있는 곳으로 이동. class="class 이름" : 해당 코드에 아이디 부여. 여러번 사용하여 그룹화 가능. Example 1 - 기존 사이트 연결 텍스트 링크 만들기 네이버 사이트 가기 다음 사이트 가기 이미지 링크만들기 Example 2 - 기존 사이트 연결 표절, 패러디, 오마주의 차이점 법률용어는 아니지만 작품에 대해 표절시비 건이며 연예계, 예술계를 막론하고 ..

티스토리툴바