HTML/CSS

전역속성(global atttribue)란, 모든 엘리먼트를 대상으로 사용을 할 수 있는 속성을 말합니다.HTML에서 자주 사용되는 전역속성에는 tilte, class, id , tabindex , data-, style 등이 있습니다.선택자는 뒤에서 부터 읽는 습관을

문자 배치 시 수직중앙 정렬을 하는 방법에는 display:flex를 사용할 수도 있지만 text-align: center를 통해 수평중앙에 맞춰주고, line-hegiht를 요소의 width와 동일하게 맞춰 수직 중앙으로 배치할 수 있다.계산된 스타일을 알아내는 방법

버전에 의미가 있다는 이야기로, 패키지를 이용하는데 있어 버전을 일치시키는 것은 매우 중요합니다.ex) 12.14.1Major : 기존 버전과 호환되지 않는 새로운 버전.Minor : 기존 버전과 호환되는 새로운 기능이 추가된 버전Patch: 기존 버전과 호환되는 버그

220412 tip revealjs.com ppt로 만들 수 있는 페이지 width: min-content사용해보기 1. filter 말 그대로 보여지는 것들을 필터링하는 속성입니다. hue-rotate 예시 backdrop-filter !codepen[0s

HTML과 웹브라우저는 뗄레야 뗄수 없는 관계를 가지고 있습니다. .html확장자명을 가진 html로 작성된 파일은 웹브라우저에서 동작을 하게 됩니다. 웹브라우저는 단순히 html문서를 보여주는 뷰어역할을 하는 것이 아니라 사용자입장에서는 웹서핑을 도와주는 다양한 기능

CSS를 작성하는데 있어 블록요소와 인라인요소를 구분하는 것은 기본이 될 수 있습니다. 두 속성이 가지고 있는 특징이 다르기 때문이죠.대표적으로 두 속성을 비교하는데 자주 이용되는 태그는 span태그와 div 태그로 두 태그 모두 영역을 설정할 때 사용을 합니다.하지만

HTML5에서 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화했습니다.하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수 있습니다.

두가지 태그 모두 인용문에 사용된다는 점에서는 동일합니다만, blockquote는 블록요소이며 q는 인라인 요소라는 점에서 큰 차이가 있습니다. 따라서 비교적 긴 문장은 <blockquote>를 사용하고 문장내에 짧게 인용을 사용하는 경우에는 <q>를 사용하

앞선 글에서는 단순히 p태그 같은 것으로 글자를 나열하는 것을 정리했습니다. 이번에는 조금 포매팅 요소에 대해 정리를 해보도록 하겠습니다. (MDN 문서를 정리한 것으로 MDN을 확인하면 보다 자세한 내용을 확인할 수 있습니다.)나열 되어있는 문단 중에서 어떤 단어들이

지난 번 블록요소와 인라인 요소를 설명하며, a태그의 예외적인 포함 규칙을 확인해본 적이 있었습니다.이번에는 조금 더 자세한 a태그와 하이퍼 링크에 해대 정리를 해보도록 하겠습니다😊마찬가지로 MDN문서를 바탕으로 정리를 했기에 MDN 문서를 확인하면 보다 자세한 내용

이번 시간에는 entity개념에 대해 배워볼 예정입니다.위 예시를 보면 코드작성자가 의도했던 스페이스 출력과 일반 글자 p가 적용되지 않는 것을 볼 수 있습니다. 이렇게 표현하고 싶은 내용을 그대로 표현할 수 있도록 도와주는 기능이 entity입니다.HTML에서 문자

지난 블록요소와 인라인 요소에서 살펴보았듯이 div 태그와 span태그는 모두 아무런 의미도 가지고 있지 않는 요소라는 점에서는 공통점이 있습니다. 또한 전역 특성만 포함합니다.하지만 div태그는 block요소, span태그는 inline요소라는 점에서 큰 차이가 있습

아래와 같이 목록을 나타내는 태그에는 ul,ol,li태그가 있습니다. 이러한 태그들은 꼭 글자만이 아니라 웹페이지상의 sub-menu를 구성하는데도 사용이 되기에 잘 알아두면 보다 효율적으로 사용을 할 수 있겠습니다.<ol> 요소는 정렬된 목록을 나타냅니다. 보통

<dl> 요소는 설명 목록을 나타냅니다. <dl>은 <dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.dt-dd는 하나의

이전까지 배운 목록들은 단순히 아이템을 나열하는 형태이었다면, table의 경우 조금 더 복잡한 형태의 데이터를 행렬의 모양으로 나타날 수 있습니다.예전에는 레이아웃을 잡기 위해서 table태그를 사용했습니다만, 지금은 시멘틱태그 및 css를 통해 배치를 잡을 수 있기

임베디드 요소는 우리가 직접 그 내용을 코드로 작성하는 것이 아니라 외부에 소스를 불러와서 웹페이지 내에 삽입하는 요소를 이야기합니다. 그렇기에 이미지나 비디오, 오디오 등의 멀티미디어요소들이 많이 해당이 됩니다.<img> 요소는 문서에 이미지를 넣습니다. 이미지

이미지 태그에 이미지를 삽입하는 방법에는 프로젝트 내부의 이미지를 삽입하는 방식과 외부의 소스를 불러와 작성하는 방법으로 나뉩니다. 그런데 파일을 불러와 삽입하는 것이다 보니 파일의 유형에 따라 어떤 것은 정상적으로 출력이 되고 어떤 것은 정상적으로 출력되지 않을 수도

임베디드 요소는 우리가 직접 그 내용을 코드로 작성하는 것이 아니라 외부에 소스를 불러와서 웹페이지 내에 삽입하는 요소를 이야기합니다. 그렇기에 이미지나 비디오, 오디오 등의 멀티미디어요소들이 많이 해당이 됩니다.구글에 sample mp4라고 검색하면 여러가지 샘플 영

form요소의 경우 다른 요소들과는 성격이 조금 다릅니다. 그동안은 우리가 일방적으로 사용자에게 정보를 전달하는 형태를 띄었으며 무슨 정보가 들어갈지 알고 있었다면, form요소는 사용자에게 어떠한 정보를 입력할 장치를 제공하는 것이고 사용자에게 정보를 다시 돌려받게

보통 폼의 기본적인 모습은 아래와 같습니다. 사용자가 입력할 수 있는 입력창이 있고, 사용자가 어떠한 정보를 입력해야할지를 앞에 붙여주고 있습니다. 이렇게 어떤 정보를 입력할지 설명을 해주는 부분을lable이라고 하며, 사용자가 정보를 입력할 수 있는 영역을 input

input에는 굉장히 다양한 유형이 있습니다. 또한 이러한 유형에 따라 생긴 모양도 다르며 유형에 따라 사용하지 못하는 속성도 있습니다. 이러한 다양한 input의 유형(속성)들 중에 대표적으로 사용되는 속성들을 정리해보도록 하겠습니다.<input> 태그의 typ

input에는 굉장히 다양한 유형이 있습니다. 또한 이러한 유형에 따라 생긴 모양도 다르며 유형에 따라 사용하지 못하는 속성도 있습니다. <input> 태그의 type 속성은 <input> 요소가 나타낼 타입을 명시합니다.코드 안에 제출이라는 단어를 쓰지 않

input에 사용할 수 있는 속성은 타입에 따라서 특정 타입에서만 사용가능한 경우도 있습니다. 이번에는 대부분의 타입이 가능한 속성을 정리해보았습니다.전체 폼 데이터에서 현재의 필드 데이터가 어떠한 값을 가지고 있는지를 명시합니다. 아래와 같이 get이나 post에 들

button요소는 말 그대로 클릭이 가능한 요소를 뜻합니다.버튼 요소는 form 내에서 submit이나 reset을 하는데 사용할 수 있으며 button 대신해 input타입의 submit이나 reset으로 대신할 수 있습니다. 이러한 부분에 어떤 다른 점이 있는지 그

<select> 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다. 드롭다운 메뉴를 통해 하나의 값을 선택해 선택한 값을 제출할 수 있습니다. 또한 후보군들의 경우 select태그의 자식요소로 option을 사용해 작성할 수 있습니다.옵션 내 자식요소로 들어가 있는

<datalist> 요소는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담습니다. 단독으로 사용되는 요소는 아니며 input의 list라는 속성과 함께 사용이 됩니다.select태그와 datalist태그

textarea는 input타입 text와 비슷한 요소입니다. input타입 text는 단순히 한줄밖에 입력을 받을 수 없었다면, textarea는 여러줄의 멀티라인 텍스트도 받을 수 있다는 점에서 차이가 있습니다.단, 스페이싱이나 개행이 그대로 반영이 됩니다. 만약

head의 내용는 페이지에 표시되지 않습니다. 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함합니다. 여기서 메타데이터란 데이터를 설명하는 데이터입니다. html의 메타데이터는 html문서를 설명하는 데이터가 메타데이터이며, 그 내용들이 hea

전역속성은 어떤 태그에서도 전부 다 사용할 수 있는 속성입니다.id와 class는 식별자라고 불리우는 속성입니다. 차이점은 id는 고유 식별자로 id의 이름이 겹치게 작성을 할 수 없다는 것입니다.id 전역 특성은 문서 전체에서 유일한 고유식별자(ID)를 정의합니다.

위키백과에 정의된 내용에 따르면 css는 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading style sheets)는 마크업 언어가 실제로 표기되는 방법을 기술하는 스타일언어(style sheet language)입니다.css는 사실 html이 없다면 무엇인가

가상클래스선택자는 다른 선택자들 보다 더 디테일하고 작은 범위를 선택할 때 사용할 수 있습니다. selector에 의해 선택된 요소들 중에서 \_\_\_조건에 해당하는 요소들로 범위를 좁혀줍니다.selector에 의해 선택된 요소들의 형제 요소 중에서 맨 앞에 위치하는

앞서 공부한 가상클래스선택자들은 이미 알고 있는 selector들에 콜론(:)을 사용해서 뒤에 추가적인 정보를 명시함으로써 selector가 선택하는 HTML요소의 범위를 더 디테일하게 좁히는 용도로 사용했습니다.마찬가지로 not도 이미 알고 있는 selector을 선

수도클래스 셀렉터들 중에서도 html 요소의 상태에 따라 스타일링을 변경할 수 있는 선택자를 동적가상클래스 선택자라고 합니다. html의 상태가 변경된다는 이야기는 html의 요소는 하나인데 사용자의 동작에 따라서 그 html의 스타일을 변경할 수 있다는 것입니다. 예

가상요소선택자는 selector 뒤에 콜론(:)을 붙여서 사용한다는 점에서 가상클래스선택자와 사용방법이 유사합니다. 하지만 가상요소선택자의 경우 콜론을 두개(::)붙여준다는 점에서 약간의 차이가 있습니다.하지만 콜론을 두개 붙이는 권고가 나온 것은 CSS3부터로 이전에

요소를 normal flow에 따라 배치합니다. top, bottom, left, right값을 사용할 수 없습니다. 기본값입니다.요소를 normal flow에 따라 배치하고, 자기 자신(position을 바꾸지 않았을 때, static)을 기준으로 top, right

flex box는 CSS3에 추가가 된 개념입니다. 등장하기 전에는 여러개의 요소가 있을 때 요소를 나열하는 방법이 정해져있지 않았고, 여러가지 방법을 우회해서 정렬을 했습니다.<div>는 블록요소이기 때문에 위 사진처럼 위에서 아래로 쌓이게 됩니다. 가로로 정렬

flexbox를 이용하기 위해서는 부모요소인 flex-container과 자식요소인 flex-item들이 필요합니다.무엇보다 flex-container와 flex-item 각각에만 사용되는 속성들이 있기 때문에 이러한 개념을 잘 이해하는 것이 중요합니다.또한 item이

container내부의 아이템을 배치할 때 사용할 주축(세로, 가로) 및 방향(왼쪽부터 배치, 오른쪽 부터배치)을 지정할 수 있습니다.flexbox의 기본 속성은 1차원 정렬에 관한 것이기 때문에 한 줄에 모든 아이템이 들어가려고 합니다. 따라서 내용물이 한줄에 넘치는

flex 또는 grid 컨테이너 안에서 현재 아이템의 순서를 결정 짓습니다. HTML을 이용하지 않고 CSS만으로도 item들의 정렬 순서를 변경할 수 있도록 돕습니다. 아이템의 정렬 순서는 오름차순으로 정렬되며, 같은 값이 있는 경우 소스 코드의 순서대로 정렬이 됩니

주축을 기준으로 아이템들을 어떻게 배열할 수 있을지에 대한 설정입니다. 사용할 수 있는 키워드들이 많지만, 브라우저마다 사용되지 않는 키워드도 있습니다. 왼쪽정렬 오른쪽 정렬의 개념과는 다릅니다.Justify-content를 사용할 때는 flow-direction이 어

바깥쪽에 container박스가 있고 내부에 item들을 나열한다는 점에서는 flexbox와 비슷한 개념입니다. 단, flex레이아웃의 기본 개념이 1차원이었다면, grid 레이아웃의 개념은 2차원으로 행과 열이 존재하기 때문에 gird레이아웃의 경우 주축과 교차축 모

grid-row와 grid-column은 grid의 개별 아이템에 설정할 수 있는 속성에 대해 공부를 해보도록 하겠습니다. grid-row와 grid-column의 경우 사용법도 거의 동일하며, 둘 다 단축속성이라는데 공통점이 있습니다.아이템이 row가 어디서 시작하고

복습@keyframes@media 타입 and (기능)@media 타입 and (기능) and (기능) 으로 확장이 가능하다.반응형 웹사이트이 기본중에 기본이 되어가는 상황.적응형: 모바일 (m.naver.com)반응형: 사용자의 뷰포트에 맞춰 반응하는 것.all :

lang속성은 주로 보조기기사용자, 대표적으로 스크린리더 사용자에게 기본 언어를 어떻게 제공할 것인지를 결정하는지를 도움을 줍니다.웹접근성 관점에서 필요한 속성이라고 할 수 있습니다.lang="ko" 로 언어를 설정할 수 있으며, lang="ko-KR"을 통해 언어설정

프로젝트의 규모가 조금씩 커지고, 코드가 길어지면서 class명을 짓는데 많은 고민을 하게 됩니다. 적절하게 정의된 코드의 네이밍이 가독성을 높이고 디버깅 시간을 절감시켜주기 때문이죠. 여기서 적절하게 정의된 네이밍이란 다른사람이 보더라도 무슨 목적으로 만들어졌고, 어

logo 영역 디자인header, h1태그를 이용해 시맨틱 요소를 사용해 마크업을 할 수 있습니다.HeadingsMAP을 이용하면 시멘틱 요소로 마크업한 경우 어떻게 웹 구조가 잡히는지를 확인할 수 있습니다.hedaing level의 경우 책의 목차와도 같습니다. 다양

패션몰이나 쿠팡과 같은 웹페이지를 확인하다보면 할인율이라던가 구매 평점이 들어가 있는 경우를 더러 볼 수 있을 것입니다.보통은 웹페이지를 확인하면 아 구매평점이구나 라고 생각을 할 수 있지만, 스크린리더를 사용하는 사용자들의 경우 스크린리더를 통해 읽은 내용만으로 이

Carousel 과 wai-aria Carousel을 마크업할 때는 무엇보다 접근성에 더 신경써서 작성을 하는 것이 중요합니다. 스크린리더를 사용하는 보조기기 사용자의 경우 이미지가 바뀌었는지, 현재보여지는 이미지가 무엇인지?, 이미지안에 있는 내용은 어디인지를 명

IR기법이란? 웹페이지의 로고를 디자인 하는 경우 자주 쓰이기도 하는 IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말합니다. 스크린리더 사용자가 로고의 텍스트를 읽을 수는 있지만 실제로 화면에

※스크린리더 사용자를 위한 마크업aria-expanded 접힌 경우 false, 펼쳐진 경우 true자바스크립트를 통해 동적으로 제어하는 대상에 id값을 부여하고, 컨트롤되는 대상에 aria-controls="해당 id값"을 부여합니다.현재는 1번째 뎁스에 마우스를 올

npm을 이용한 환경설정을 통해 Bootstrap에서 필요한 기능만을 가져와서 사용할 수 있으며, 또한 Boostrap에서 제공하는 기본 테마를 취향에 따라 커스터마이징할 수 있다.npm을 통해 package.json 파일을 생성하고 parcel-bundler를 설치를

Bootstrap CustimoizeBootstrap Custimoize-Sass(https://getbootstrap.kr/docs/5.1/customize/sass/Bootstrap의 컴포넌트 색을 커스터마이징하려면 아래에 나와있는 \`SCSS의 map의

우리가 필요로 하는 기능만 @import를 통해 가지고 와 사용을 함으로써 최적화를 할 수 있습니다.부트스트랩 초기화단, 이렇게 가지고 오는 경우 초기화 과정을 거쳐야합니다.이러한 과정이 작업이 번거롭게 느껴질 수 있지만, 웹사이트를 제작하면서 최적화된 성능을 위해 불

테일윈드 비교