DAY 11 : 선택자, 우선순위 ,..
2022. 1. 22. 15:44
WEB/HTML,CSS
- CSS 선택자 2022.01.21 - [WEB/HTML, CSS] - DAY 10 : CSS, 선택자 DAY 10 : CSS, 선택자 - CSS (Cascading Style Sheets) CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. 스타일을 HTML 문서로부터 따로 분리하는 것이 가능해진다. - CSS를 사 biblia00.tistory.com 이전 선택자와 이어서 포스트하겠다. 4. 아이디 선택자 id 선택자도 클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 줄 때 사용한다. 선택자 작성 시에는 #아이디 명으로 작성한다. 아이디 선택자는 문서 안에 한 번만 적용할 때 사용한다. #아이디명 { 스타일 주기 } 5. 그룹 선택..
DAY 10 : CSS, 선택자
2022. 1. 21. 15:20
WEB/HTML,CSS
- CSS (Cascading Style Sheets) CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. 스타일을 HTML 문서로부터 따로 분리하는 것이 가능해진다. - CSS를 사용하는 이유 HTML만으로 웹 페이지를 제작할 경우 HTML 요소 세부 스타일 하나하나 따로 지정해 주어야 하기 때문에 매우 많은 시간이 걸리며, 완성된 후에도 스타일의 변경 및 유지보수가 매우 힘들어진다. 따라서 이 문제를 해결하기 위해서 W3C에서 만든 스타일 시트 언어가 바로 CSS이고, 웹 페이지의 스타일을 별도 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다. - CSS 문법 선택자 { 속성명 : 속성값; 속성명 : 속성값; ... ..
DAY 09 : progress, 시맨틱 태그
2022. 1. 20. 14:59
WEB/HTML,CSS
- progress 진행 정도를 나타내는 태그이다. progress 태그 사용해보기! 자바 스크립트로 누르면 게이지가 차는 것을 구현했다. 바로 창을 띄우면 이런 화면이 나오고 진행 버튼은 누르면 위 사진처럼 게이지가 차는 것을 확인할 수 있다. - 시맨틱 태그 (Semantic Tag : 의미 있는 태그) HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미를 가지는 태그를 제공한다. 내용 non-semantic 태그 내용 semantic 태그 - 시맨틱 태그의 종류 header 상단부 / 로고, 머릿말, 검색창, nav 사이트 메뉴 nav 메뉴바 / table, ul을 이용한 메뉴 배치 aside 사이드 공간 / 광고, 링크모음, ... section 중심 내용을 감싸는 공간 / 주제별 컨텐츠..
DAY 08 : iframe, form 태그, input 태그
2022. 1. 19. 15:41
WEB/HTML,CSS
- iframe (inline frame) 해당 웹 페이지 안에 제한 없이 또 다른 하나의 웹페이지를 삽입할 수 있다. 단, 정보보호를 위해 iframe 제한을 둔 사이트들은 새 창으로만 접근할 수 있다. - form 태그 웹 페이지 내에서 사용자로부터 입력을 받은 후 데이터를 모아서 다른 페이지로 전송할 때 사용하는 태그 여러 입력들 (input, textarea,...) - input 태그 사용자에게 입력받기 위해 사용하는 태그 maxlength 값의 최대 길이 size 글 상자의 크기 (값의 길이 X) placeholder 사용자에게 어떤 값을 입력해야하는지 유도, 안내해주는 문자열 값 readonly 읽기전용, 수정할 수 없다. value 실제 값 name 해당 입력이 이름 (데이터 처리쪽에서 식..
DAY 07 : colgroup, 페이지 책갈피, 요소
2022. 1. 17. 14:47
WEB/HTML,CSS
- colgroup 뒤에 나오는 컬럼에 적용할 스타일을 해당 태그에서 미리 적용할 수 있다. 테이블의 첫 번째 열들은 전부 deepskyblue 배경색으로 설정한다. - 페이지 책갈피 현재 페이지에서 이동하고 싶은 부분으로 이동하는 법 요소의 id 속성을 이용해서 간단한 책갈피를 만들 수 있다. 책갈피를 통해 가고싶은 위치 요소에 id속성으로 특정한 문자열 값을 부여해주면 다른 태그에서 href에 가고 싶은 곳의 "#아이디명"으로 작성해 주면 클릭 시 그곳으로 이동한다. 페이지 책갈피 여섯번째 신호등으로 이동! 열세번째 신호등으로 이동! 첫번째 신호등 붉은색 푸른색 그 사이 3초 그 짧은 시간 노란색 빛을 내는 저기 저 신호등이 내 머릿속을 텅 비워버려 내가 빠른 지도 느린지도 모르겠어 그저 눈앞이 샛노..
DAY 06 : 테이블, 병합, 캡션, thead, tbody, tfoot
2022. 1. 17. 13:37
WEB/HTML,CSS
- 테이블 (표를 의미한다.) 혹은 : 열 ... ... tr : 행 (table row) th : 컬럼명, 컬럼제목 (table header) td : 열 ( table data) 테이블 사용해보기! 이름 나이 홍길동 22 김사과 20 - 병합 열 병합 colspan = "합칠 열 개수" : 오른쪽에 있는 셀을 잡아먹으며 병합한다. 행 병합 rowspan = "합칠 행 개수" : 아래쪽에 있는 셀을 잡아먹으려 병합한다. 병합 이용 해보기 ! 셀 병합 테스트 첫 번째 셀 두 번째 셀 세 번째 셀 네 번째 셀 다섯 번째 셀 여섯 번째 셀 일곱 번째 셀 위 사진에서 colspan의 결과가 빨간색으로 표시된 곳이며, 노란색은 rowspan의 결과이다. - 캡션 (Caption) 태그를 이용하면 테이블 상단에 ..
DAY 05 : void 요소, 이미지 태그, 하이퍼 링크
2022. 1. 13. 17:56
WEB/HTML,CSS
- 빈요소, void 요소 (Empty Elements) 여는 태그와 닫는 태그 사이가 없는 요소 "단일 태그" 라고도 하며 주로 문서에 무언가를 첨부하기 위해서 사용된다. - 이미지 태그 웹 페이지에서 주로 사용되는 이미지의 종류 jpeg : .jpg/ .jpeg - 휴대폰, 카메라 사진 gif : .gif - 움짤, 움직이는 이미지 png : .png - 배경을 투명하게 할 때 사용 HTML 문서에 이미지를 삽입할 때에는 태그를 사용한다. (alt는 생략가능) 여기서 경로는 상대경로와 절대 경로 두 가지로 나뉜다. - 상대 경로 현재 위치한 페이지(파일) 기준으로 찾아가는 경로이다. ./ 현재 폴더를 의미한다. ../ 상위 폴더를 의미한다. - 절대 경로 어떤페이지에 있던가에 최상위 경로부터 하나씩 ..
DAY 04 : 서식 태그, 리스트 태그
2022. 1. 12. 17:46
WEB/HTML,CSS
- 서식 태그 물리적 모양을 지정하는 태그 종류 의미 진하게 기울이기 형광 처리 가로줄 (중간) 밑줄 위첨자, 아래첨자 서식 태그 사용 해보기! strong 태그는 중요한 글자를 굵게 만든다. b 태그는 글자를 단순히 굵게 만든다. em 태그는 중요한 글자를 이탤릭체로 표현한다. i 태그는 단순히 글자를 이탤릭체로 표현한다. mark 태그는 글자를 하이라이팅 처리한다. del 태그는 글자 중간에 가로줄을 그어서 표현한다. ins 태그는 글자 아래쪽에 밑줄을 그어서 표현한다. x2+2x+1 H20 - 리스트 태그 1. 순서가 없는 리스트 내용1 내용2 ... 2. 순서가 있는 리스트 내용1 내용2 ... type 1 : 숫자 (1,2,3,....) a : 알파벳 소문자 (a,b,c,....) A : 알파벳..