HTML,CSS

노건우·2023년 7월 31일
0

HTML

  • HTML이란?
    -HT :Hypter Text
    문서와 문서가 링크로 연결되어 있는
    -M : Markup
    태그로 이루어져 있는
    -L : Language
    언어

  • div태그
    상단, 메뉴, 본문, 하단 등과 같이 웹 페이지의 레이아웃에 대한 영역을 구분하기 위해 사용되나,
    서로 중첩시켜 사용할 수 있으며, 다른 태그를 포함할 수 있다.

  • input태그
    입력양식을 표시
    name속성,id속성
    name속성은 웹 프로그램과 연계되는 속성으로 한 페이지 안에서 고유한 값을 명시해야 한다.
    id속성은 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시해야 한다.
    id값과 name값은 서로 동일하게 지정해도 무관
    -type 속성에 따라 화면에 표시되는 요소의 종류가 결정된다.(text, password, hidden..)
    -value속성은 해당 요소에 기본적으로 작성되어 있을 값을 기술한다.
    -텍스트를 입력받는 요소의 경우 maxlength속성을 사용하여 최대 입력가능한 글자 수를 제한 할 수 있다.

  • 파일 찾아보기
    type = "file"요소는 웹 프로그램으로 파일을 전송할 수 있도록 찾아보기 버튼을 표시하며, 한 번에 하나의 파일만 첨부 가능하다.
    단, 이 요소가 사용될 경우에는 반드시 태그에 enctype = "multipart/form-data"속성이 명시되어야 한다.
    -브라우저의 보안을 위해 이 요소에서는 value 속성값을 지정할 수 없다.
  • 프로그램 전송
    method속성은 전송방식을 의미한다.
    -get: 입력된 모든 내용이 url에 포함되어 전송된다.(기본값. 비밀번호 같은 경우도 그대로 노출된다.)
    -post: 입력된 내용이 url에 노출되지 않고 전송된다.

semantic 태그

semantic tag
-의미론적 태그
-문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 한다. 특히 html5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서
의미론적 태그 (semantic tag)를 새롭게 정의해서 제공하고 있다.
-SEO(search engine optimization)
->검색을 최적화하기 위해서 제목,부제목,시멘틱 태그를 잘 활용하면 특정 키워드로 검색했을 때 내가 만든 웹사이트가 검색창에 노출될 수 있다.
->다시 말해서 검색 엔진이 내가 만든 웹사이트를 어떤 결과에 띄워줘야 될지를 알려줄 수 있다.
-유지보수성
->단순이 div태그로만 모든 구조를 짜는 것보다 더 한눈에 알아볼 수 있기 때문에 다른 개발자들이 코드를 유지보수 하기가 더 편해진다.

CSS

  • 기본 셀렉터 종류
    css에서 셀렉터를 작성하는 방법은 기본적으로 HTML의 태그이름,클래스 속성, ID속성에 대한 명시가 있다.

  • 태그이름
    selector{...css 본문..}
    특정 태그를 가리킨다. HTML내에 동일 태그가 존재할 경우 모든 태그 요소를 일괄 처리한다.

  • 클래스

  • .selector{...css본문...}
    셀렉터 이름 앞에 점(.)을 붙여 표현하고 HTML태그의 CLASS속성에 점을 제외한 이름을 명시하여 지정한다.
    태그의 종류를 가리지 않고 여러 요소에 복수 지정이 가능히다.
    (재사용의 목적)
    이 경우 selector의 이름은 자유롭게 지정한다.
    ID
    #selector{...css본문..}
    셀렉터 이름 앞에 #을 붙여 표시하고, HTML태그의 ID속성에 #을 제외한 이름을 명시하여 지정한다.
    ID속성의 값은 HTML페이지 내에서 중복 사용될 수 없다.
    (고유특성 명시)
    이 경우 셀렉터의 이름은 자유롭게 지정한다.

  • 조합형 셀렉터
    tag. class{..css값..}
    tag#id{..css값..}
    id값이나 클래스 값을 태그이름과 함께 명시하여 적용하는 형태
    셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
    태그, 클래스, 아이디를 독립적으로 명시할 때 보다 우선적으로 적용된다.

  • and의 의미를 갖는 콤마 사용하기
    selector1,selector2,selector3,...{..css적용..}
    여러 개의 요소에 동일한 css내용을 적용하기 위해 셀렉터를 콤마로 구분해 일괄 처리 할 수 있다.
    태그, class, id등 모든 형태의 css셀렉터가 가능하다.

  • 링크와 관련된 가상 클래스 선택자
    HTML태그에서 특정 상황이 발생했을 경우에만 적용되는 CSS셀렉터
    가상 클래스는 CSS의 셀렉터 이름 뒤에 ":상황"의 형식으로 명시한다.

profile
초보 개발자 이야기

0개의 댓글