프로그래밍/HTML&CSS
-
선택자(selector) (3)프로그래밍/HTML&CSS 2022. 8. 28. 19:49
10. 가상 클래스 선택자 사용자 동작에 반응하는 가상 클래스는 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용하면 된다. :link 웹문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시되나 :link 선택자를 사용하면 링크의 밑줄을 없애거나 색상을 바꿀 수 있다. :visit 웹 문서의 링크 중에서 한 번 이상 반문한 링크에 스타일을 적용한다. 한 번 이상 반문한 텍스트 링크는 보라색이 기본 값으로 사용자가 반운한 텍스트 링크와 색상이 달라지지 않게 하려면 :visit 선택자를 사용하면 된다. :hover 웹 요소 위로 마우스 포인터를 올려..
-
선택자(selector) (2)프로그래밍/HTML&CSS 2022. 8. 27. 09:49
6. 하위 선택자(자손) 조상 요소를 기준으로 그 하위의 요소 중 선택된 모든 요소의 스타일에 적용한다. 표기시에 조상 태그와 하위 태그를 사이 공란을 두어 표현하며 아래 코드에서 ul 태그 요소의 모든 하위 요소 중 모든 li 태그를 선택하여 li 태그의 글자 색을 red로 적용하는 예제 코드이다. ul li { color: red;} [하위 선택자] 하위 선택자 네이버 구글 다음 위 예제 결과에서 ul 태그 요소 하위 모든 a 태그 요소에 스타일이 적용된 것을 확인할 수 있다. 7. 자식 선택자 자식 선택자는 부모 요소를 기준으로 그 하위의 모든 자식 요소에 스타일을 적용한다. 이때 자식요소는 본인의 바로 밑에 존재하는 요소를 자식 요소라고 한다. 자손 요소가 아닌 자식 요소임으로 하위 선택자와 혼동..
-
선택자(selector) (1)프로그래밍/HTML&CSS 2022. 8. 26. 19:30
선택자(selector)는 웹 문서에게 HTML의 어느 부분에 스타일을 적용할지 알려주기 위해 적용 대상을 지정하는 방식을 의미한다. 선택자를 사용하는데는 대표적인 여러 방법이 있다. 1. 전체 선택자 스타일을 문서의 모든 요소에 적용할 때 사용하는 선택자로 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용한다. * { padding:0, margin: 0;} /*모든 요소에 padding:0, margin: 0를 적용*/ 위와 같이 웹 문서 전체에 마진과 패딩을 0으로 지정하면 필요없는 여백을 지워 깔끔하게 웹문서를 정리할 수 있다. 2. 요소 선택자 특정 태그를 사용해 지정하면 해당 태그를 사용한 모든 요소에 스타일을 지정한다. p { color: deepskyblue; } /* p 태그 요소..
-
CSS 들어가기프로그래밍/HTML&CSS 2022. 8. 25. 19:33
CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념으로 HTML이 텍스트나 이미지, 표 와 같은 요소를 웹문서에 넣어 뼈대를 만드는 역할을 한다면 CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당하는 스타일 시트 언어이다. 스타일 시트(Style Sheets)는 웹 문서 안에서는 스타일 규칙을 여러 개 사용하는데 한눈에 스타일 규칙을 확인하고 수정 소요 발생시 수정에 용이하기 위해 한군데 묶어 놓은 집합을 의미한다. 스타일 시트는 크게 '브라우저 기본 스타일'과 사이트 제작자가 만드는 '사용자 스타일'로 구분된다. 또 사용자 스타일은 다시 인라인 스타일과 내부 스타일, 외부 스타일 시트로 나뉜다. 인라인 스타일 인라인 스타일은 간..
-
input 태그프로그래밍/HTML&CSS 2022. 8. 24. 11:19
태그는 아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분에 주로 사용된다. 태그는 type 속성을 설정하여 속성값에 따라 입력 content를 변화시킨다. 대표적인 type 속성으로는 text, radio, checkbox 등이 있다. 아래에서 자세히 알아보자 type 속성 text는 문자를 입력 받는 글 상자의 기능을 제공한다. password는 비밀번호를 입력 받는 글상자의 기능을 제공한다. 회원가입 아이디 : 비밀번호 : size : 크기를 설정하는 속성 maxlength : 값의 최대길이를 설정하는 속성 placeholder : 입력전 특정 데이터를 입력하도록 안내하는 값을 설정 radio는 여러개의 옵션 중에서 단 하나의 옵션만을 입력 받을 수 있도록 하는 버튼의 기능..
-
form 태그프로그래밍/HTML&CSS 2022. 8. 23. 19:45
태그는 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그로, 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용한다. 태그는 몇가지 속성을 사용해서 입력 받은 자료를 서버로 전송시킬 방식과 서버에서 어떤 프로그램을 이용해여 처리할 것인지 지정할 수 있다. form 태그 속성 method 속성 method는 사용자가 입력한 내용을 서버 프로그램으로 어떻게 넘겨줄 것인지 방식을 지정한다. 대표적으로 GET , POST방식이 존재하며, GET 방식은 서버로 보낼 데이터를 URL에 실어서 전달하는 방식이고 POST방식은 데이터를 BODY에 묶어 전달하는 방식이다. ... 입력 요소 action 속성 action은 form 태그 안의 내용을 처리해 줄 서버를 지정하며, 도착지 URL를 입력한다.
-
하이퍼링크 태그프로그래밍/HTML&CSS 2022. 8. 21. 11:50
하이퍼링크란 다른 페이지나 사이트로 연결하는 링크로 웹 페이지에서 문자 혹은 이미지를 클릭했을 때 반응하여 사전에 연결해둔 페이지로 이동하는 기술이다. 하이퍼링크을 구현하기 위해서는 태그를 사용한다. 태그의 사용법을 알아보자. 링크에 사용될 문자 또는 이미지 href 안에는 상대 경로 혹은 절대경로, URL 를 입력하고 태그 사이에 문자 혹은 이미지를 삽입하여 구현한다. [1_하이퍼링크.html] 하이퍼링크 다음 서브페이지 위 와 같이 코드를 작성하였다면 "다음" 혹은 "다음 로고 이미지"를 클릭할시 다음 URL를 통해 다음 페이지로 이동하게된다. 그 아래는 다음 pages 폴더에 subpages.html이라는 다른 HTML 페이지를 만들어 "서브페이지" 혹은 "서브페이지 이미지" 를 클릭할 경우 sub..