Frontend/HTML & CSS

[CSS] 가상 클래스? 가상 요소?

이전에 로그인 버튼 만들기를 하면서 ::before, ::after를 사용해서 만들어봤었습니다. 이걸 가상요소라고하는데 기존에 많이 사용했던 :hover같은 가상 클래스와는 다르다고해서 어떤 종류가 있는지 정리해봤습니다. 가상 클래스(Pseudo Classes)❓ - 하나의 콜론(:)을 사용하며, 별도의 class를 지정하지 않아도 요소를 선택할 수 있다. 즉, 가상 클래스는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다. Selector Example Example Description :active a:active Selects the active link :checked input:checked Selects every checked element :disable..

[CSS] White-space

✍ white-space : 요소가 공백을 지정하는 속성 normal : white-space의 기본 값으로 화면에서 보여지는 영역만큼 줄바꿈을 하게 된다. nowrap : 의 내용이 화면을 넘어가도(뷰 포트보다 문장의 길이가 짧으니) 감싸지 않겠다.는 의미로 화면을 벗어나면 가로 스크롤이 생기며 한 화면에서 보이지 않게 된다. 을 함께 쓰면 한 문장 단위로 줄 바꿈 시행 (영어 기준, 한글은 한 글자씩)=> 반응형 디자인할때 쓰인다. 단어 안에서 줄이 바뀌기를 원하는 경우 overflow-wrap, word-break, hyphens를 사용하세요. word-break : keep-all ➡ 단어 단위로 묶는다. https://developer.mozilla.org/ko/docs/Web/CSS/white..

[HTML, CSS] 로그인 화면 만들기 + 가상요소

썸네일과 같은 간단하게 버튼만 있는 로그인 화면을 만들었습니다. 로그인페이지는 을 쓰거나 다른 버튼을 추가해 다양하게 만들어봤는데 이번엔 가상요소 ::after을 써서 만들어봤습니다. 아이콘 이미지 출처 : flaticon

Grouping Content란? <div> 만 쓰는거 금지..!

✍Grouping Content : 무엇인가를 감쌀 때(그룹화 할 때) 사용하는 태그의 명칭 HTML 구조를 처음에 짤 때는 무조건 그룹핑할때는 ! 라는 생각으로 범벅을 시켜놨었다. 하지만 배울수록 이건 잘못되었다는걸 알았다.. (처음에 만든 코드들 보면,, 한숨만) Sementic Tags를 지킨다고 생각하면 될 것 같다. 쉽게 이야기하자면, 수십 수백 줄이 되는 코드를 보면서 어느 부분이 네비게이터인지 어느 부분이 본문인지 한 눈에 이해할 수 있게 해준 방법이라 생각한다. 🔎 Semantic Tags란? : '의미가 있는 태그'라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들이다. (자세한 내용은 아래 링크에서 확인할 수 있다.) https://www.w3schools.com/..

[HTML] HTML Living Standard란?

HTML5는 처음 개발 공부할때부터 들어왔고 로고로도 굉장히 익숙하다. 그런데 수업 중 HTML Living Standard를 HTML5라고 지칭하는게 옳지 않다고 하셔서 그 이유에 대해 정리해보았다. 🚩 HTML Living Standard란 ? 버전 숫자와는 상관없이 HTML 문법 등을 규정한 표준으로, 버전이라는 개념을 사용하지 않고 유동적으로 계속 업데이트한다는 의미이다. 현재 WHATWG에서 HTML5를 현존하는 LIving Standard로서 인정하고 있기 때문에 HTML5와 혼동하여 사용되기도 한다. WHATWG 에서도 확인할 수 있다. 1.2 Is this HTML5? The HTML Living Standard (sometimes informally called HTML5). The HT..

[HMTL] emmet이란?

✍ emmet : HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인 실습 h1 h1+h2 h1>p h${hello} hello h1>[*2 h1>p*5 h1#one h1.one .one #one (div>table>(tr>(td*2))*3)+(footer>p) lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam id nemo adipisci dolores corrupti? Ipsam explicabo commodi blanditiis expedita placeat quis ad quod nihil recusandae. Voluptates blanditiis optio pariatur odio. im..

[CSS] 색상 컬러 사이트 :: HTML Color Codes, Adobe Color, Two Color Combinations

화면을 꾸미다보면 기본으로 제공하고있는 컬러들이 많습니다. coral, darkgreen등 많지만 내가 원하는 색상을 정하기 위해서는 디테일한 조정이나 색조합을 먼저 보고싶을때 사용하면 좋은 사이트들입니다. 1. HTML Color Codes https://htmlcolorcodes.com HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. htmlcolorcodes.com 원하는 컬러는 잠금 표시를 해 고정해 두며 다른컬러와의 조합을 해볼 수 있습니다. 2. Adobe..

[CSS] 레이아웃3 :: 여백(content, border, padding, margin)

HTML 요소는 총 네 가지의 영역으로 구성되어 있다. content 영역 : 요소의 내용이 작성되어지는 영역 border 영역 : 요소의 테두리가 지정되는 영역 padding 영역 : content와 테두리 사이 영역 margin 영역 : 다른 요소와의 간격을 나타내는 영역 * width, height는 기본적으로 content 영역의 크기를 지정하는 속성

[CSS] 레이아웃1 :: display(block | inline | inline-block | none)

레이아웃 (Layout) 사전적 의미 : 배치 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배열(배치)하는 것을 의미. 화면 배치 방법 ( display : block | inline | inline-block | none ) display 속성 : 요소가 화면에 어떻게 보여질지 지정하는 속성 속성 의미 block 화면을 수직 분할 (한 줄을 모두 차지) -> width / height 지정 O inline 화면을 수평 분할 (한 줄에 여러 inline 요소가 배치됨 == 글자를 생각하면 된다) -> width / height 지정 X inline-block inline의 수평 분할 특성 + block의 크기 지정 가능 none 화면에 표시되지 않으나 요소는 존재하고 있는 상태 1) block ..

[CSS] 선택자 :: 문자열, 일반·형태 구조, 부정 , 우선순위

문자열 속성 선택자 속성 값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자. 작성법 의미 선택자[속성 ~= "특정값"] { css 코드; } 띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 태그 선택 선택자[속성 |= "특정값"] { css 코드; } 속성 값이 특정 값을 단어로 포함하는 태그 선택 + "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다. 여러 속성 중 맨 앞이면서, "-" 기호가 포함된 속성 값에 "-" 기준 앞쪽 문자열이 특정 값과 같은 태그 선택 선택자[속성 ^= "특정값"] { css 코드; } 속성 값이 특정 값으로 시작하는 태그 선택 선택자[속성 $= "특정값"] { css 코드; } 속성 값이 특정 값으로 끝나는 태그 선택..