분류 전체보기 (30) 썸네일형 리스트형 selector (셀렉터) 1. type selector -특정 요소나 그룹을 선택하는것이 아니라 웹 전체적인 일관적이게 표현해야하는 것들이 있을때에만 사용 -상단에 작성하는 것이 좋음 2. ID selector-콕 찝어서 설명할 수 있는 유일한 이름표 (전체 html 중 딱 1개)- # ~~~ { } 3. class selector-ID와 다르게 중복 선택이 가능 - .~~~{ } head> link rel="stylesheet" href="styles/main.css"> title>csstitle> style> .title { font-size: 36px; color: red; font-weight: bold; } #heading { font-size: 36px; .. CSS ( Cascading Style Sheets) 발전함에 따라 font, table, animation 등등이 버전에 따라서 업데이트 됨. 모듈별로 버전이 달라지기 때문에 웹 브라우저의 지원 범위가 다를 수도 있음--> 재미난 속성들을 공부해서 바로 적용하는것보단 사용자들이 어떤 웹브라우저를 많이 사용하는지 확인 한 후에 적용하는것이 좋음. Cascading (폭포처럼 흐른다.) 위에서 정의한 것들이 아래에까지 적용됨. 1. 룰 기반 (규칙)의 언어 (여러가지) ex. ⓐh1태그는 red, ⓑ li 태그는 green ... -> 그대로 적용 2. 특정요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있음. -그것이 태그가 될 수도 있고 그 외의 것이 될수도 있음-- > selector e.. 전역속성 문서 전체에서 유일한 고유식별자를 정의한다. 고유하기 때문에 문서 통틀어서 딱 1개, 중복으로 사용할 순 없음. id 시작할땐 반드시 영어 소문자로 시작해야하고 -나 _는 가능하지만 공백이 들어가선 안됨. 안녕하세요 안녕하세요 안녕하세요 안녕하세요 수많은 중에서 id를 정의해서 3번째 안녕하세요를 지목 안녕하세요 안녕하세요 안녕하세요 안녕하세요 id 와 다르게 중복이 가능. 안녕하세요 안녕하세요 안녕하세요 안녕하세요 2번째 안녕하세요는 hi hello 라는 클래스를 갖는게 아니라 hi와 hello 라는 class 2가지를 갖고 있음. 그 여러개를 구분할때 공백으로 구분함. 여러개의 자바스크립트를 한 요소에 적용하기 용이함. The style attribute can override it, though. .. 메타데이터의 역할 <head> metadata -데이터를 설명하는 데이터 (데이터를 위한 데이터) -ex. 책 앞부분에 저자, 발행일, 출판사와 같은 정보들. 책이란 데이터를 설명하는 책 앞부분 데이터 -html 데이터를 설명하는 데이터를 뜻함, 걔네가 head로 들어감 문서 제목 요소 -브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의 -1 head 에 1 title 에 Document 로 되어 있어 위에 Document 라고 뜨게 됨 즐겨찾기를 해도 그 이름에 에 쓰여진 이름이 들어감 타이틀을 지을 때에 이 페이지인지 식별 가능하게 해주는것이 좋음! 나와 비슷한 페이지가 있더라도 타이틀을 잘 짓는 웹페이지가 상위 노출 됨. 명사로만 니열하지 읺는 것이 좋음- 검색엔진이 설명하지 않고 광고 페이지로 인식을 하는 경우가.. Form 관련 요소 사용자에게 정보를 얻을 수 있는 장치는 마련 사용자가 정보를 입력하면 다른 페이지나 서버로 전송 할 수 있도록 마련 ->대화형컨트롤을 포함하는 문서 구획 양식 데이터를 처리할 프로그램의 URI. => 다른 페이지나 서버로 전송될 폼데이터의 최종 목적지 주소를 action에 넣음. 상대경로로 다른 파일로 연결할 수도 있음. method get: 받은 정보가 주소창에 노출이 됨. 검색어와 같은 것들이 사용되고 비밀번호와 같은 개인정보는 get을 사용하면 안됨 post: 주소창에 드러나지 않음. , enter your name : ---> label 쓸수 있는 창 ---> input input 과 label이 쌍으로 움직임 인라인이기 떄문에 로 묶음 과 을 사용하게 되면 꼭 for와 id를 함께 사용 하여야 .. 임베디드요소 내용을 코드로 작성하는것이 아니라 외부의 소스를 가져와서 웹페이지에 표현하는 방법 ex. 이미지 비디오 이미지 삽입요소 빈요소- 닫는태그가 사용되지 않음 -src (source) 특성은 필수 ,src 속성에 값으로 들어가는 애들이 url, 이미지가 위치한 파일의 경로 절대경로 어떤 위치에서 어떤 파일이던간에 보여질 수 있는것들 마우스 우클릭- 이미지 링크복사 한 값들을 넣어서 사용 상대경로 내가 있는 현재 위치에서 이미지가 있는 위치를 나타내고 가리킬때 현재위치가 어디냐에 따라서 다른 이미지가 보여질 수 있음 이미지 파일을 만든 뒤에 파일을 넣어두고 경로를 입력 ( alternative 속성 = 대체 텍스트) 이미지에 대한 설명을 텍스트로 직접 입력하는 속성 스크린 리더 사용에 용이 접근성 올라감 절대경.. 목록과 표 아이템들을 표현 할때 list item order list 순서가 있는 정렬 목록 순위를 나타내거나 단계적으로 수행해야하는 것들 (ex. 요리 레시피) 요리 레시피 ol 태그를 했기 때문에 자동적으로 1,2,3,4가 붙은 것 0개 이상의 태그를 갖고 있어야 함. 속성 태그가 아니더라도 태그에 value="" 하게 된다면 똑같이 설정을 할 수 있다. 중간에 넣어도 됨. reversed 를 통하여 역전도 가능 unodered list 비정렬 목록, 순서 없는 목록 순서 없이 아이템들을 나열할때 (ex.메뉴) 태그 안에 태그를 넣을 수 있음. 용어를 정의하거나 설명할때 사용 (용어)와 (설명) 태그를 자식으로 갖을 수 있음 주로 용어 사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용 태그 안에 용어.. 구조를 나타내는 요소 콘텐츠 분할 요소특정구역이나 구획을 분할 하거나 묶을때 사용순수 컨테이너로서 아무것도 표현하지 않는다. (의미를 갖고있지 않음)일괄적인 스타일링을 한다던지 묶어서 특정 위치에 놓고 싶을때 사용 문서의 특정 구역이 다른 언어임을 leng속성을 사용하여 표시하는 용도로 사용 -유지보수가 편해진다.-협업이 쉬워진다.순수한 컨테이너 구문콘텐츠를 위한 통용 인라인 컨테이너 본질적으로 아무것도 나타내지 않음. 시맨틱 웹(Semantic Wen>웹페이지를 만들때 div를 이용해서 할 순 있지만 그게 어떤 의미인지 모름 (아무런 의미를 갖고 있지 않은 순수 컨테이너)----> 시맨틱(의미의, 의미론적인) 태그를 시맨틱 태그, 시맨틱 요소라고 부름. 요소의 의미를 고려하여 구조를 설계하고 코드를 작성함. 의미론적인 .. 이전 1 2 3 4 다음
