본문 바로가기

웹 프론트 엔드

 (42)
CSS 선택자 - 속성 선택자 속성 선택자 - 태그 이름 외에 추가적인 정보를 전달할 때 사용되는 선택자 - 속성, 특성을 표시하는데 사용합니다. /* css */ a{ display: block; } /* attr */ a[target]{ color: pink; display: block; } /* attr=value */ a[target="_blank"]{ color: red; display: block; } /* attr^=value */ a[href^="https"]{ font-size: 30px; margin-left: 30px; } /* attr$=value */ a[href$=".net"]{ background-color: yellow; } /* attr_=value */ a[href_="daum"]{ color=sien..
CSS 선택자 - 주요 선택자 CSS 선택자 (CSS selector)란? - 하나의 CSS 규칙을 만들때 어떤 html요소를 선택할 지 정의하는 것입니다. - https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors CSS 선택자 - Web 개발 학습하기 | MDN CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합 developer.mozilla.org - CSS 스타일링뿐만이 아닌, javascript를 활용하기 위해서도 선택자를 알고있어야 합니다. 자주 사용되는 선택자 - Type Selector /* Ty..
CSS 캐스캐이딩 원칙 스타일 우선순위 - 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다. :: 브라우저에 의해 정의된 스타일 인라인 스타일을 적용을 하면 스타일을 수정할때 매번 인라인된 코드 위치로 가서 고쳐야된다. 이는 코드의 유지보수에 악영항을 끼치게 되므로 인라인 스타일은 필수적인 부분 외에는 지양하는것이 좋다. - 소스코드의 순서가 뒤에 있으면 덮어쓴다 > 맨 처음에 h1을 " color:red; font-size:24px " 로 설정하고, 이후에 h1을 다시 " color:blue "로 설정했다면, color 는 blue로 덮어씌워진다. 스타일 상속 - 부모 요소의 스..
CSS 개요 CSS란? - Cascading Style Sheets - W3C 에 의해 권고안이 작성되며, 현재는 Level 3가 있다. - 다양한 CSS 모듈들이 있으며 모듈별로 버전이 따로 있다. > 웹 버전 별로 모듈별 지원범위가 다를 수 있다. - 폭포수처럼 위에서 아래로 적용된다. CSS의 구조 CSS는 룰 기반(Rule-based)의 언어입니다. 즉, 특정요소, 또는 특정요소들의 집합의 스타일 규칙을 정의하여 사용합니다. h1 { color:red; font-size:12px; } > css 스타일 규칙의 예시 1. 선택자 : 스타일을 지정할 HTML 요소를 선택 2. 선언 블록 : 중괄호 {} 내부의 여러 선언들을 작성 3. 선언 : 속성과 값으로 이루어진쌍, 끝날때마다 세미콜론( ; )을 붙인다. 4...
HTML 폼 관련 요소 form : 값을 입력하고 제출하는데 사용되는 요소 > 다른 요소들과는 다르게, 값을 입력받고 정보를 전달하는데 사용되는 요소 > 회원가입, 설문조사, 주문서 등을 만들때 사용된다. - action 속성 : 목적지 주소, 양식 데이터를 해당 URL 로 전송하여 이동한다. - method 속성 : 전송 타입 > GET : 양식 데이터를 url에 첨부하여 전송한다. 데이터가 url 상으로 보이기 때문에 비밀번호 등의 중요정보가 포함되는경우 사용하면 안된다. > POST : 양식 데이터를 요청 본문으로 전송한다. 공개하면 안되는 중요 정보를 처리할때 사용한다. input : form 내에서 입력을 처리하는 태그 - type 속성을 사용하여 형태를 지정한다 - text : 텍스트 값을 입력하는 속성 > minl..
임베디드 요소-video, audio, canvas, iframe video : 비디오 삽입 요소 > video 태그는 태그 내에 값을 넣을수 있으며, 비디오가 정상적으로 나오지 않을경우 태그 내의 값이 나온다. - 보통 브라우저가 영상파일을 지원하지 않을때를 대비해서 사용한다. > src 속성을 통해 비디오 파일 경로를 지정한다. > src 속성이 옵셔널이며, source 태그를 자식 태그로 넣어 사용할 수도 있다. - controls 속성 : video 태그 내 컨트롤 패널을 추가해 줄 수 있다. - autoplay 속성 : 첫 실행 시 자동실행을 시킨다. 사운드플레이 옵션때문에 새로고침시 재생이 멈출수도 있다. - muted 속성 : 음소거, 설정시 새로고침을 하더라도 autoplay 속성이 실행된다. - loop 속성 : 속성 추가시 영상이 끝난 뒤 처음부터 반..
임베디드 요소 - img img : 이미지를 담는 태그 > 안쪽에 내용이 없는 닫힌 태그 - src 속성 : source, 띄울 이미지의 경로를 표시하는 속성, 필수적으로 들어가야 한다. - alt 속성 : alternative, 대체 텍스트로, 이미지가 출력되지 않을 경우 이미지의 설명을 텍스트로 나타내게 만든다. - width & height : 이미지의 가로, 세로 크기를 지정해줄 수 있다. > width속성 또는 height 속성 중 하나만 사용한다면, 이미지의 비율에 맞춰 사용하지 않은 속성도 자동으로 정해진다. > 두 속성 모두 사용한다면, 비율을 무시하고 이미지 크기를 조정한다. 반응형 이미지 - srcset 속성 : 이미지 소스를 다수 올릴수 있는 속성 > 반응형 이미지를 설정하기 위해 사용한다. > 이미지의 UR..
목록과 표 - ul&ol, dl, table, caption 1. ul , ol , li - ul : Unordered List, 순서가 없는 리스트 - ol : Ordered List, 순서가 있는 리스트 > type 속성을 통해 목록의 순서표시를 다르게 할 수 있다. ex) type = "1" => 1,2,3... type="a" = a,b,c... > start 속성을 사용하여 처음 시작하는 숫자를 정할 수 있다 ex) start = "5" => 5,6,7... > reversed 속성을 사용해 목록의 순서를 반대로 만들수 있다. ex) => 1,2,3,4 => 4,3,2,1... - li : List의 구성요소, ul태그와 ol 태그 내에서 사용한다. > li 태그 내에서 또 다른 ul이나 ol 태그를 사용할 수 있다. 리스트 출력 첫번째 리스트 두번째 리..

티스토리툴바