본문 바로가기

HTML5&CSS3

 (18)
[CSS3 기초 3] - 선택자 활용 3 (문자 선택자, 링크 선택자, 부정 선택자) 문자 선택자 특정 문자 또는 문자열을 선택하여 CSS속성을 설정할 수 있다. #history2::first-letter, #history1::first-letter -> 첫 번째 글자에 속성 값을 설정할 수 있다. #history2::first-line, #history1::first-line -> 첫 번째 줄에 속성 값을 설정할 수 있다. #header h1::selection -> 해당 태그를 드래그 하였을때 반응하는 속성 값을 설정할 수 있다. 링크 선택자 문서에서 링크(href)되어 있는 문자를 선택하여, CSS속성을 설정할 수 있다. #content a::after { content: ' - ' attr(href); } -> 출력된 content내용뒤에 - 와 링크(href) 설정한 주소 값을 ..
[CSS3 기초 2] - 선택자 활용 2 (반응 선택자, 상태 선택자, 구조 선택자, 전체적인 레이아웃 설정하기) 반응 선택자 마우스로 어떤 행동을 하였을 때, 반응에 따른 속성을 설정할 수 있다. 아래의 예시를 보면 마우스를 특정 태그 위에 올리면 파란색으로 색상이 변경되는 속성이 일어난다. li:hover -> li에 마우스를 올려놨을때 설정값이 적용된다. 상태 선택자 상태에 따라서 CSS속성이 변하는 설정을 할 수 있다. input:focus -> input태그에 내용을 입력하려고 클릭하여 선택했을 때를 focus 상태라고 하며, 이때, 적용할 속성값을 설정할 수 있다. input:enable -> input태그에 입력된 내용에 대해 적용할 속성 값을 설정할 수 있다. input:disabled -> input태그의 내용을 사용자가 변경할 수 없다. 구조 선택자 구조에 따라서 CSS속성이 변하는 설정을 할 수 ..
[CSS3 기초 1] - 선택자 기초 및 활용 1 (태그 선택자, id 선택자, class 선택자, 전체 선택자, 속성 선택자, 후손 및 자손 선택자) 선택자란? 특정 태그를 선택하여, 해당 태그의 속성을 변경하는 목적으로 사용한다. head 태그안에서 코딩을 하여 특정 태그의 속성을 변경해준다. 가볍게 예시를 들어보면 아래 그림에 head 태그에서 선택자를 div로 지정하여 설정값을 지정하였다. 따라서, div 태그의 배경만 설정한 값이 적용된 것을 확인할 수 있다. - background : 배경색 설정 만약, 아래와 같이 특정 태그를 여러 번 설정하는 경우가 있으면 가장 마지막에 설정해준 속성 값이 적용된다. - color : 폰트 색 설정 - font:weight:bold; - 굵은 글씨 설정 만약, 모든 태그에 적용하고 싶은 속성이 있으면 선택자를 *로 지정해주면 된다. id(#)와 class(.) 태그의 id와 class를 선택자로 사용하여 ..
[HTML5 기초 4] - 태그 활용 3 (layout ,div, span, semantic) 레이아웃 구성 태그 홈페이지를 설계할 때, 각 태그들을 어떻게 배치할지 설정할 수 있다. (table 태그는 사용의 한계가 있기 때문에 div 태그가 중요하다.) ※ 처음 홈페이지 설계 시 div 태그와 span 태그로 레이아웃을 잘 잡는게 중요하다. div : 개행 태그 를 사용하지 않아도 자동으로 행을 구분해주는 태그 (block 형식이라고 불린다.) span : 개행을 하지 않고 열을 추가하며 생성되는 태그 (inline 형식이라고 불린다.) 다음은 div 태그를 여러개 사용하여 만든 예시이다. div 태그들 사이마다 밑줄같은 선으로 구분되어 있다. 시멘틱을 이용한 레이아웃 div 태그로만 사용하여 레이아웃을 구성하면 나중에 수정하고 싶은 부분을 찾으려고 할 때, 코드가 길어질수록 찾기 어려움 ->..
[HTML5 기초 3] - 태그 활용 2 (video, form) 동영상을 출력하는 태그 video : 웹사이트에서 동영상을 출력해주는 태그이다. controls : 재생, 소리, 전체화면, 재생속도 등 컨트롤러를 표시해주는 태그이다. type : 파일의 타입을 입력하는 태그이다. src : mp4 파일의 경로나 파일명을 적어주는 태그이다. 폼 태그 회원가입, 택배 배송지입력 등 웹사이트에서 많이 사용하게 되는 태그이다. 기본적으로 form 태그로 큰 틀을 잡아주고 설계를 시작한다. action : 제출 버튼을 눌렀을 때, 호출할 주소를 적어준다. method : 정보 전달의 방식을 결정하는 태그로 get 방식과 post 방식이 있다. ① get : 웹사이트에서 검색같은 행위를 했을 때, 정보가 code값으로 변환되어 도메인 뒤에 붙어서 서버쪽에 전달 ② post : ..
[HTML5 기초 2] - 태그 활용 1 (ul, li, ol, table, img, audio) 리스트 태그 HTML을 구성할 때 목록을 구성해주는 태그이다. - ul : 리스트를 출력할때 순서구분 없이 출력된다. > unorder list의 줄임말 - ol : 리스트를 출력할때 순서가 구분되어 출력된다. > order list의 줄임말 - dl : 선언한 문자 앞에 아무것도 붙지 않고 출력된다. > description 또는 definition list라고 불린다. 표를 나타내는 태그 - table : 표형식의 레이아웃을 만드는 태그로, 예전에는 웹사이트의 전체적인 레이아웃을 만드는데 활용되었지만 유지보수의 복잡성과 한계성이 있어 현재는 사용 빈도가 줄었다. 기본적으로 table 태그로 틀을 잡고 tr, td 태그로 표를 설계한다. - border : 테이블 테두리의 두께를 뜻한다. - tr : ..
[HTML5 기초 1] - 태그 기초(p, br /, a, i, sup, ins, del) 태그란? HTML문서를 구성하고 있는 요소이다. 기본적으로 태그에는 이름과 속성이 있다. - 태그의 기본 성질 같은 형식이 한 쌍이며, 태그를 사용하여 작성하는 경우 마지막에 태그를 넣어줘야 한다. - HTML 기본 구조 기본적으로 html 태그로 전체를 감싸고 head, body 태그 부분으로 나눠진다. head 태그 환경설정에 관한 정보들이 존재하는 공간이다. 머리말에 해당하며, css나 javascript를 연결해줄 수 있다. 파비콘이나 문자열 인코딩같은 문서들의 정보를 다양하게 제공한다. (파비콘 : 웹사이트 주소창에 보이는 아이콘) body 태그 정보전달에 관한 정보들이 존재하는 공간이다. - : 글자를 출력할때 크기를 조정할 수 있는 태그로 h1부터 h6 까지 사용 가능하다. (글자 크기 순서..
[HTML5&CSS3] Web, HTML, CSS란? 1. Web 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간이다. IT에서는 WWW(World Wide Web)라는 말의 줄임말로 사용된다. - 프로토콜(Protocol) : 네트워크상에서 약속한 통신규약 (Http, FTP, SMTP, DHCP, POP) - IP : 네트워크상에서 컴퓨터를 식별할 수 있는 주소 - DNS : IP주소를 사람이 쉽게 사용할 수 있게 맵핑한 문자열 - Port : 컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호 2. HTML Hyper Text Markup Language의 약자로 웹 문서를 기술하는 언어이다. 웹문서를 표현하기 위해 태그들로 구성되어 있다. 3. CSS Cascading Style Sheets의 약자로, HTML로 설계한 웹 문서를 ..

티스토리툴바