[스나이퍼팩토리] 한컴AI아카데미(26.04.01)

HTML

---

-스타일(style)

  style: 인라인(요소 내부)으로 CSS를 적용하는 방법

  문법: style="속성: 값; 속성: 값; ..."

  장점: 빠른 적용, 특정 요소만 커스터마이즈 가능

  1) 배경색 = background-color

  2) 글자색: color

  3) 안쪽 여백: padding

  4) 글자 크기와 정렬: font-size = 글자 크기 지정하는 속성(px, rem등 단위 사용)

                                 text-align = 텍스트의 수평 정렬 방식을 지정하는 속성

                                 주 정렬 값: left, center, right, justify(양쪽 정렬)

   5) 테두리: border(만약 한 방향만 원할 시 ex) border-left) 

                   문법: border: 6px solid #0478D6;(두께, 굵기, 색상)

스타일 속성(형식)	의미
"background-color: 색;"	배경색
"color: 색;"	글자색
"padding: 크기;"	Content와 Border 사이의 여백을 나타내는 영역의 크기
"margin: 크기;"	Border 바깥쪽 영역의 크기
"border: 6px solid #0478D6;"(두께, 굵기, 색상)	content 영역을 감싸는 테두리 선
"font-size: 크기;"	글자 크기
"text-align: 방향;"	텍스트의 수평 정렬 방식을 지정하는 속성

 

-색상

  1) 색상 이름: red, blue, green 등 표준 색상명

      입력이 빠르고 직관적으로 색상 유축 ㅏ능

       표현방식: <p style="color: red";>...

   2) RGB

       rgb(R,G,B), 각 색상은 0~255 값

       표현방식: <p style: "rgb(255.0.0);">

   3) 16진수(0~9, A-F조합)

        (투명도: rgba() or #RRGGBBAA)

 

-배경

    1) 배경색: background-color

    2) 배경 이미지: background-image: url(...)

    3) 반복/크기/위치 제어: background-repeat, background-size(cover, contain등), background-position(center 등)

-링크

  1) a 태그: a요소(하이퍼링크를 생성하는 기본 태그(anchor))

      href: 이동할 목적지 URL 지정(Hypertext Reference)

                특별한 링크: mailto:(이메일), tel:(전화번호) 지원

       target: 하이퍼링크가 열릴 창이나 탭을 지정하는 속성

                  주요값: _sefl(현재 창, 기본값), _blank(새 탭이나 새 창에서열기)

                   링크 상태 의사클래스: 사용자의 상호작용(클릭, 마우스 오버 등)에 따라 스타일변경

*:link(기본), :visited(방문 후), :hover(오버 시), :active(클릭 시) -> 반드시 LVHA 순서로 정의 

  2) 페이지 책갈피

         같은 페이지 내 이동: id 속성과 href = "#id값"을 조합하여 사용

                                           *

 

-이미지

  1) 반응형 이미지 팁: max-width: 100%; 사용 시 부모컨테이너크기에 맞춰 자동 조절

      테두리 적용: CSS border 속성을 사용하여 이미지 주변에 선 추가 

      링크와 이미지 맵

      이미지 링크: <a>태그 안에 <img>태그럴 넣어 이미지를 클릭 가능한 링크로 만듭니다.

      이미지 맵: 하나의 이미지에서 여러 영역(area)에 각각 다른 링크를 지정할 수 있습니다.

                     ( 이미지맵 소스 생성 사이트: https://www.image-map.net/)

      사용 태그: <map>과 <area>사용. img태그의 usemap 속성으로 연결합니다.

 

-리스트

  1) ul(순서 없는 리스트, Unordered List): 순서가 중요하지 않은 목록

                                                                   기본적으로 점(불릿 마커) 기호를 사용하여 표시

  2) ol(순서 있는 리스트, ordered List): 순서나 단계가 중요한 목록

                                                         기본적으로 숫자또는 알파벳 순서 표시

   3) dl(정의 리스트, definiton List): 용어와 설명을 짝지어 표현하는 정의

                                                   dt: 정의할 용어 또는 이름을 지정할 때 사용

                                                   dd: 용어에 대한 구체적인 설명을 작성

 

-테이블 핵심 이해

  1) table: 표 전체를 감싸는 최상위 컨테이너

 

  2) tr(table Row): 표의 가로행을 정의

 

  3) th(table header): 표의 제목 셀(굵게/가운데 정렬)

 

  4) td(table data): 표의 일반 데이터 셀

    

  5) colspan/rowspan: 셀병합: 표의 여러간(셀)을 하나로합쳐서 레이아웃을 구성하는 속성입니다.

                                 colspan: 가로방향(열, Column)으로 지정한 숫자만큼 셀을 병합

                                 rowspan: 세로 방향(행, Row)으로 지정한 숫자만큼 셀을 병합합니다. 

 

  6) caption: 표의 제목이나 설명을 제공하는 태그

                  border-collapse: collapse; 데이블의 이중테두리를 하나로 병합

                  스타일링: padding, background-color 등으로 꾸밈

 

느낀점

---

 

스타일속성에 대해 배웠다. 대학교 1,2학년 때 HTML 수업을 듣기 해서 그런지 여기까지는 이해하기에 어렵지는 않았다.

하지만 여기까지도 기초이기 때문에 다음 수업을 듣기 전에 수시로 복습해야겠다고 느꼈다. 

 

 

 

 

 

 

 

 

 

 

 

 

——————————————————————————

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.