본문 바로가기
반응형

html7

CSS 속성의 상속과 우선순위 적용 CSS 속성 상속가능과 불가능- 상속하는 속성은 자식에게 영향을 줌속성상속 가능width/heightnomargin/paddingnobordernobox-sizingnodisplaynovisibilityyesopactiyyesbackgroundnofont/coloryesline-heightyestext-alignyeswhite-spanceyespostionnooverflowno 상속되는 속성 자식에도 적용CSS Cascading- css를 사용하다보면 한 태그에 여러 스타일이 겹치는 경우가 발생하여 우선적용에 대해 결정하는 것을 캐스케이딩이라 함- 캐스케이딩에는 1. 스타일 우선순위  2. 명시도 3. 선언순서 세가지 규칙이 있음1. 스타일 우선순위 - css가 어디에 선언 되었는지에 따라 우선순위.. 2024. 11. 26.
CSS 기초 CSS란?- Cascading Style Sheet의 약자로 HTML,XHML,XML같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어- 웹페이지를 꾸며주는 역할CSS 기본문법- 선택자{특성:값;}CSS 적용방식1) html요소의 style속성을 직접 작성하는 방식 직접 스타일을 작성                   2) html의                  3) 링크(link) 방식          4) @import 방식 2024. 11. 25.
id & class 태그의 차이점 1. id 태그- 한 요소에만 사용이 가능- #으로 선택- 고유하게 전체 페이지에서 단 한가지에만 적용이 가능(고유 영역 식별자)- label과 input 컨트롤 연결 식별자- 표와 표 설명을 연결하기 위한 식별자 메인id 텍스트 표 설명 표 제목   2. class 태그- 여러 영역에서 중복 정의를 허용하여 재사용이 가능한 식별자- 동일한 값을 갖는 요소가 많음- .으로 선택 버튼 읽기 ... ... idclass#으로 선택.으로 선택고유하게 전체 페이지에서 단 한가지에.. 2024. 11. 18.
div & p & span 태그의 차이점 비교 1. div & p & span 태그 설명▼ 태그- 태그는 body 문서 안에서 각 영역을 구분할 때 사용- block 요소- layer을 구분하거나 틀을 만들어주는 컨테이너 역할 ▼ 태그- 와 같이 block 요소- 같은 경우는 하위에 블록요소가 포함되지만 는 하위에 블록요소가 포함되어선 안됨 ▼ 태그- inline 요소 - HTML 문서 내에 자신에게 주어진 공간만 차지하는 태그 2. div & p & span 차이점 비교1) block / inline- , 는 block  요소로 가로줄 전체를 다 차지※ 는 문서태그이긴 하지만 영역을 나눌 때 주로 사용하며 를 문서 내용을 작성할 때 사용함- 은 inline 요소로 주어진 공간만 사용 2) 하위태그 포함 요소- 태그는 , 태그가 하위(자식.. 2024. 11. 15.
HTML 시멘틱 태그 (sementic) 1. 시멘틱 태그 설명- block element이며 사이트의 구조를 설계하기 위한 태그- 사이트의 구조를 파악하기 용이할 수 있도록 만들어진 태그  2. 시멘틱 태그 종류 시맨틱 태그설명header- 페이지의 머리글, 제목, 메뉴, 검색 관련, 유틸, 작성자의 이름 등으로 구성nav- 네비게이션, 목차, 리스트 등 다른 페이지로 이동을 위한 링크 공간aside- 간접 컨텐츠, 보조 컨텐츠 이며 대부분 옆에 위치하는 내용을 의미- 좌측과 우측 사이드 공간 위치를 의미하며 본문 외 부수적인 내용을 주로 표현main- 의 중심 주제- 메인 콘텐츠 영역- 문서내에서 반드시 한 번만 사용 가능- 다른 header, footer, nav, article, section, aside의 하위로 작성 불가능sectio.. 2024. 11. 14.
HTML 폼 태그(form) - 3(요소 설명) 1. button 태그 - form을 전송하거나 reset 할 때 사용button type 속성설명button- 버튼의 형태를 만듬- 눌렸을 때 다른 동작이 필요하다면 따로 함수에 연결해야함submit- form 제출reset- form 리셋 button  1.-1 button 태그와  input 태그의 차이점- input은 종료태그 없이 속성을 이용 / button은 종료태그 있어 속성 이용- form안에 있는 button태그는 input type을 이용해서 만들어야 함 2. label 태그- label 태그는 단독으로는 효과가 없지만 input 태그를 제어하여 상태값을 변경하도록 돕는 역할- label 태그를 사용하면 텍스트 컨트롤에 초첨이 맞춰서 사용성이 높아짐- label.. 2024. 11. 13.
LIST