FE가 되고싶니? 나도✨

CSS 텍스트 효과

배경(background)

▶background-color : 배경색상

▶background-image : 배경 이미지 지정

▶background-position : 배경 이미지의 위치를 지정

▶background-repeat : 배경 이미지를 반복할지 여부

▶background-size : 배경 이미지의 크기를 지정

▶한번에 사용 하려면 “color→image→repeat→position→attachment” 순서로 작성하며, 속성마다 띄어쓰기로 구분 (부여하지 않는 속성은 생략)

EX) p {background:red url('sample.jpg') no-repeat x10 y10 fixed;}

단! background-size는 한번에 사용되지 않는다.

IMG 태그 vs background

▶해당 콘텐츠 영역에서 중요한 의미를 가지는 이미지의 경우 img 태그를 사용한다. 그래야 alt 속성을 통해 스크린 리더기에서도 이미지를 접근 할 수 있으니까!

▶중요한 이미지이기 보다는 디자인을 위한 그림을 넣어야 할 때 background 속성을 이용한다.

css3의 기능

▶선택자(selector) : 스타일을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것.

▶박스모델(Box Model) : 모든 HTML 요소는 Box 형태의 영역을 가지고 있다. 브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다.

웹 디자인은 콘텐츠를 담을 박스 모델을 정의하고 CSS 프로퍼티를 통해 스타일(배경, 폰트와 텍스트 등)과 위치 및 정렬을 지정하는 것이라고 할 수 있다.

▶HTML 요소 : 텍스트, 이미지, 동영상, 단락, 목록 등의 웹 페이지를 구성하고 있는 요소

▶경계선(border) : HTML 요소를 둘러싼 경계를 나타내는 선

▶마진(margin) : 경계선과 다른 외부의 요소와의 간격

▶패딩(padding) : 경계선과 HTML 요소 사이의 간격

▶배경과 경계 : CSS3는 그라데이션을 만들고, 여러 배경 이미지를 적용하고, 둥근 모서리를 만드는 기능을 포함하여 배경과 경계를 스타일링 하기 위한 더 많은 옵션을 제공

▶텍스트 효과 : CSS3는 텍스트 그림자, 텍스트 그라데이션 및 텍스트 래핑 제어하는 기능을 포함하여 텍스트 스타일을 위한 새로운 속성을 제공

▶변환 : CSS3는 회전, 축적, 스큐, 번역과 같은 새로운 변환 기능을 도입하여 요소의 모양, 크기, 위치를 조작할 수 있다.

▶애니메이션 및 전환 : CSS3는 애니메잇ㄴ 및 전환을 만들기 위한 새로운 속성을 제공하여 웹 페이지에 시각적 효과와 상호 작용을 추가할 수 있다.

▶미디어 쿼리 : CSS3는 다양한 화면 크기, 해상도 및 장치에 대해 다양한 스타일을 정의할 수 있는 미디어 쿼리를 도입.

※에릭 마이어(eric meyer)의 reset.css는 대표적인 reset 문서지만 자신의 환경에 맞춰서 하나씩 추가해 나가는 것이 좋다.

https://meyerweb.com/eric/tools/css/reset/

Box model

▶Content 는 요소에 실제로 들어가는 내용이 들어가는 영역이다. 이 영역의 크기는 width 와 height 속성으로 조정할 수 있다.

▶Padding 은 Content 와 Border 사이에 위치하며 , 요소의 내부 여백을 지정한다 . Padding 은 padding top, padding right, padding bottom, padding left 속성을 사용하여 각각의 면을 조절할 수 있다.

▶Border 는 요소의 외곽선을 지정하는 역할 . Border 는 border top, border right, border bottom, border left 속성으로 각 면을 조절할 수 있으며 스타일(style) , 두께(width) , 색상(color), 모서리의 둥굴기(radius) 등을 지정할수 있다.

▶Margin 은 Border 와 다른 요소들 사이의 간격을 지정하는 역할을 합니다 . Margin 은 margin top, margin right, margin bottom, margin left 속성을 사용하여 각 면을 조절할 수 있다.

▶margin :10px 20px; ⇒ 값을 두개 적으면 상·하값 / 좌·우값

▶3개의 값을 입력하면 상 / 좌·우 / 하

▶4개의 값을 입력하면 상/ 우 / 하 / 좌 ⇒ 시계방향

▶margin: 0px auto; or margin: 100px auto; ⇒ 가운데 정렬 가능(요소가 블록속성일 때)

→위 아래 간격은 0px 혹은 100px 거리를 두고 좌우는 컴퓨터가 알아서 맞춰주세요.

border, margin, padding

▶부모요소(element)에서의 패딩(padding)은 자녀요소(element)에겐 마진(margin)이다.

▶ [box-sizing : border-box;] : 선의 두께에 따라 px이 추가 될 수 있었는데 해당 명령에 따라 정해진 픽셀에 맞춰서 만들 수 있다.

문서의 스타일을 초기화 하는 이유?

▶브라우저가 기본적으로 적용하는 스타일을 제거, 웹 디자이너가 의도한 스타일링을 더 쉽게 할 수 있도록 하는것

▶브라우저마다 기본 제공 스타일이 다름. 기본 스타일 제거하지 않으면 웹디의 스타일을 적용하는데 어려움을 겪을 수 있다.

HTML 속성 class, id

▶HTML 태그는 태그 내에 속성(Attribute)을 가질 수 있다.

▶속성은 HTML 태그가 가지는 특성을 지정

▶속성은 태그에 대한 추가 정보를 제공, 어떻게 표시, 기능이나 동작과 관련된 정보를 전달 하는 등 다양한 용도로 사용된다.

▶속성의 이름과 값은 “=”기호로 구분된다.

▶수학에서의 등호와 다름. “등호의 오른쪽에 있는 값을 왼쪽에다 대입한다.” 라는 뜻이다.

▶id는 고유해서 하나만 가질 수 있고 class는 원하는 대로 부여할 수 있다.

▶각 태그에는 반드시 필요한 속성과 옵션인 속성도 있는데 속성은 태그마다 다르다.

▶for과 id는 이름이 같아야 한다. NAME에 for과 id랑 똑같이 들어가도 되지만 연결된것은 아님. 백엔드 개발자들이 열어보지 않아도 확인 할 수 있게 해주는 것. 

▶라벨은 항목들을 하나로 묶어주는 역할도 한다. ex) 취미 항목에서 스포츠, 독서, 음악감상의 name을 hobby로 통일시킴

▶취미에 라벨태그가 붙지 않는 건 여러가지 중에 선택 할 수 있기 때문이다.

▶name : 백엔드 개발자에게 알려주는 이름(라벨)

▶id : label의 for과 같은 이름을 부여해주어야함.

▶value : 컴퓨터에게 진짜 값을 알려주는것.

→스포츠가 스포츠인걸 인식시켜줌.

▶radio : 여러 개 중에 하나 선택 할 수 있음.

<form> : 서식

▶웹 페이지에서 사용자가 키보드로 데이터를 입력하거나 마우스로 선택할 수 있는 서식을 폼(form)양식이라고 한다.

▶<input> : 입력요소 / type : 입력방식

▶form : get

→<form action="회원가입 완료 후 보여줄 페이지로 보내줌" method="get"></form>

→ex)회원가입 완료창, 로그인창, 메인창 등

▶form : post

→get, post는 백엔드 개발자가 정해줌. 프론트엔드 개발자에겐 권한이 없다.

▶<fieldset> : 폼 태그를 감싸는 또 하나의 태그

→회원가입을 페이지 한 줄로 할 땐 별로 의미 없지만 간혹 두, 세 개를 가로 페이지로 나눠져서 회원가입을 할 때가 있음. 그 땐 폼을 두개 쓰는게 아니라 필드셋을 2개를 써주는 것이다.

▶<legend> : 필드셋의 제목 태그

→ex)회원가입 양식 폼 : 보통 미각적으로 예쁘지 않아서 사용자의 시각에 보이게 적진 않는다. But 접근성, 스크린 리더기가 읽어줄 때 무슨 내용에 관한것인지 알아야 하기 때문에 적긴 한다. 안보이게만 할 뿐.

<table> : 웹 페이지에 테이블을 삽입 할 때

▶<table border=“숫자"> ⇒ 요즘엔 회원가입 할 때만 거의 사용

▶테이블 태그에서 제목은 h1을 사용하지 않음, <caption>을 사용

▶<tr> : 테이블의 행(=가로, 줄, row)을 만드는데 사용

▶<th> : 각 열(=세로, 칸, column)의 제목을 만드는데 사용

▶<td> : 각각의 셀을 표현하는데 사용, 테이블의 설명

▶thead - 정보가 되는 테이블

▶tbody- 내용이 되는 테이블

<table> 태그 응용, 셀 합치기

▶테이블은 좌측 상단부터 우측으로 차례대로 숫자를 부여한다.

▶가로 테이블 합치기 :　합쳐서 지울 셀을 먼저 지우고, 앞에 있는 테이블은 놔둔다.

ex)7, 8 번의 테이블이라면 8번은 지우고 7을 놔둔다

→7번 의 태그 코드에 colspan 을 적고 합칠 줄의 갯수만큼 입력한다. 

<td colspan="2">7</td>

▶세로 테이블 합치기 : 합쳐서 지울 셀을 먼저 지우고 앞에 있는 테이블은 놔둔다.

ex)5, 10번의 테이블 합치기 : 5번을 놔두고 10번을 지운다

→5번의 태그 코드에 rowspan을 적고 합칠 행의 갯수만큼 입력한다.

<td rowspan="2">5</td>

→가로, 세로 다 합치기 : 14,15,19,20을 하나의 테이블로 합치려고 하면 15, 19, 20은 지우고 14에다가 태그 붙여준다.

<td colspan="2" rowspan="2">14</td>

※가로 = row 지만 세로 테이블을 합칠 때 rowspan을 사용, 세로 = column 이지만 가로 테이블을 합칠 때 colspan을 사용한다.

<video> : 동영상 넣기

▶<video src=""></video>

▶<video src="visual.mp4" autoplay loop muted></video>

▶비디오 태그는 이미지 태그처럼 알트로 무조건 써야 하는 강제 속성은 없다.

▶autoplay : 자동재생(크롬 브라우저에선 정책적으로 자동재생 허용X), loop : 무한반복, muted : 소리 끔

▶게임 사이트는 뮤트는 하지 않는다. (사용자들이 즐기기 위해 들어오기 때문에) : 사이트 특성마다 조금씩 다를 수 있음.

<a> : 링크 기능

▶<a href=""></a>

▶herf : 이동할 페이지의 URL 주소설정 (이동시킬 웹 주소가 될 수도 있고, 다른 파일이 될 수도 있다.)

▶ex) <a href="https://www.naver.com/">네이버로 보내쥬세요!!</a>

▶ex) <a href="INDEX.html">안녕하세요</a> : 다른 html 문서로도 이동 가능

<img> : 이미지 태그, 그림 넣기

▶<img src="" alt="">

▶닫는 태그가 없다. 열린 태그 하나만 있다.

▶<img> 외에 속성이 따라오는데 <src=이미지 경로를 쓰는 속성> <alt=이미지를 설명하는 속성>

▶동일 폴더 내에서 찾을 수 있는 경우 파일의 이름+확장자명을 적으면 불러올 수 있다.

▶alt : 이미지 설명이 필요한 이유 = 접근성! 스크린 리더기로 읽을 때 설명이 필요함. 

상대경로	절대경로
URL 주소를 기술할 때 HTML 문서가 존재하는 위치. 즉, 현재 폴더를 기준으로 경로를 설정하는 방식을 말함. ex) <img src="./img/test/fish3.jpg">	http://로 시작하는 도메인 네임이 포함된 인터넷 상의 유일무이하고 절대적인 URL주소를 의미. 해당 파일이 존재하는 인터넷 상의 유일무이한 위치. ex)

HTML 태그

DIV 태그 VS SPAN 태그

▶<div> 태그는 블록 요소로 구역을 나누기도 하며 아주 다양한 형태로 활용이 가능하다.

▶<span> 태그는 인라인 요소의 <div>로 div와 같은데 속성만 다르다고 생각하면 된다. 인라인 요소만 감쌀 수 있다.

▶<div>는 <span>도 감쌀 수 있다.

▶모든 태그를 <div>로만 감싸면 안된다. → 시멘틱 태그의 출현

시멘틱 태그(sementic tag)

▶<div> 태그의 기능과 마찬가지로 블록속성(block element)이며 사이트의 구조(레이아웃, layout)을 설계하기 위한 태그이다.

▶HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그이다.

시멘틱 태그(sementic tag)의 종류

▶<header> : 머리글, 제목

▶<nav> : navigation, 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현.

▶<aside>：좌측과 우측 사이드 위치의 공간을 의미, 본문 외의 부수적인 내용을 주로 표현.

▶<section> : 주제별, 카테고리 별로 구분하는 용도로 태그를 사용. 같은 테마를 가진 여러개의 콘텐츠를 그룹화한다.

▶<article> : 기사, 블로그 등 텍스트 위주의 페이지를 구성할 때 주로 사용

▶<footer> : 바닥글, 꼬리말, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그

▶<address> : 콘텐츠 작성자나 사이트 소유자의 정보 등을 부가적으로 담는 태그

▶＜main> : 문서 <body>의 중심 주제, 주요 내용 혹은 응용 프로그램의 중심 기능과 직접 관련되거나 확장되는 콘텐츠를 나타낸다.

▶<figure> : 이미지, 다이어그램, 사진 등 독립적인 콘텐츠 정의 시 사용

▶<hgroup> 제목과 관련된 부제목을 묶는 태그

▶<details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타낸다.

▶<figcaption> <figure> 요소의 설명 캔션(caption) 정의

▶<mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조

▶<time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현

▶<summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.

★시멘틱 태그(sementic tag)의 장점★

⑴ SEO 최적화에 유리(Search Engine Optimization)

▶검색엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색결과의 노출에 유리할 수 있게 해준다.

⑵ 웹 접근성에 효율적

▶스크린 리더기(시각장애인을 위한 웹서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상 시켜준다.

⑶ 유지보수의 용이성

▶많은 div 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능, 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이함.