inline / inline-block / block
inline
- 인라인 요소들은 줄바뀜 없이 나란히 배치된다.
- 기본적으로 컨텐츠의 크기만큼만 크기를 가질 수 있기 때문에 width, height 값을 가질 수 없다.
- margin, padding 또한 좌우만 반영되고 상하로는 반영이 되지 않는다.
block
- block은 기본적으로 부모요소의 width 값 만큼 크기를 가진다.
- block 요소들은 줄바뀜되어 배치된다.
inline-block
- inline-block은 inline 처럼 컨텐츠 크기만큼의 크기만 가진다. (inline)
- inline과 다르게 width, height, margin, padding 값 모두를 가질 수 있다. (block)
inline-block은 enter를 쳐서 코드를 정렬할 때, 의도치 않은 여백이 생기기에 block으로 재설정 해서 사용한다.
display: flex; 가 나온 시점 이후론 잘 사용하지 않는다.
가상요소 선택자 ::before / ::after
장식적인 요소를 만들거나 구조적인 변경없이 요소를 넣고 스타일링할 때 사용한다.
content: ""; 속성을 빈 값이라도 필수로 지정해야 한다. (없으면 작동하지 않는다.)
컨텐츠 가로, 세로 정렬 방법
display: flex;
justify-conetent: 가로 정렬 (row 기준)
align-items: 세로 정렬 (row 기준)
display: grid;
justify-items: 가로 정렬
align-items: 세로 정렬
text-align: left / center / right / justify
텍스트 왼, 중, 오, 양쪽 정렬
position: relative, absolute;
좌표의 기준 요소에 relative를 부여하고
해당 좌표로 이동할 자식 요소에 absolute를 부여한다.
그 후, top, bottom, left, right 를 통해 좌표를 설정 후, transform: translate(); 속성으로 더 자세히 설정이 가능하다.
margin: 0 auto; / margin-left: auto; / margin-right: auto;
순서대로 가운데 정렬 / 오른쪽으로 정렬 / 왼쪽으로 정렬
display: table / display: table-cell;
부모 요소에 table, 자식 요소에 table-cell 부여
table-cell 요소들에게 vertical-align 세로 정렬, text-align 가로 정렬 가능
컨텐츠 중앙 정렬 방법
.margin-text{
margin: 0 auto;
text-align: center;
}
.flexBox{
display: flex;
justify-content: center;
align-items: center;
}
.grid{
display: grid;
place-items: center;
}
.position{
position: absolute; /* 부모가 relative 가지고 있다고 가정 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.table{
display: table;
}
.table-cell{
display: table-cell;
vertical-align: center;
text-align: center;
}
display: inline-flex; 도 있다곤 하는데 실무 사용여부는 없는 것 같다.
float 해제 방법
1. float 부모 요소에 overflow: hidden; - 부모 요소 밖으로 보여져야 할 요소들은 가려지게됨
2. float 부모 요소에 float 주기 - 부모 요소의 위치 정렬이 힘들어짐
3. float 부모 요소에 display: inline-block; - inline-block 지정으로 의도치 않은 레이아웃과 여백이 생길 수 있음
4. float 부모 요소에 height 값 주기 - 반응형에서 부모 요소 height 건들기가 까다로워짐
5. float 부모 요소 다음의 태그에 clear: both; 지정 - clear: both; 를 설정한 태그는 margin-top을 가질 수 없음
6. float 부모 요소 가상요소에 clear: both; 지정 - 불필요한 요소 추가 없이 float을 해제할 수 있음
ul태그 안에 li 말고 다른 태그를 써도 될까?
안됨
먼저 문법적으로 ul이나 ol은 목록을 의미하는 태그이기에 목록 리스트를 담당하는 li 태그를 써야 문법적으로 올바름.
또한 스크린 리더기가 li 태그를 쓰지 않으면 ul 태그를 목록으로 인식하지 못 할 수도 있음.
반응형 / 적응형 차이
- 반응형 : 브라우저 사이즈에 따라 유동적으로 레이아웃이 변하는 방식
- 적응형 : 특정 사이즈를 정해놓고 그 사이즈에 진입 시, 미리 제작한 고정된 레이아웃을 제공
반응형
- 화면 크기에 따라 자동으로 변경되는 유동적인 레이아웃
- 모든 디바이스와 해상도에서 일관된 UX 제공
- 모든 화면 크기에 대한 대응이 가능함
적응형
- 고정된 레이아웃 중, 화면 크기에 맞는 레이아웃 제공
- 여러 고정 레이아웃을 유지보수할 수 있음
- 특정 해상도에서만 최적화된 UX 제공
시멘틱 태그 사용 이유
1. 코드의 가독성 향상 : 태그 이름만 보고도 어떤 역할을 하는 코드인지 유추 가능 및 유지보수의 편리성
2. SEO 향상 : 검색 엔진이 웹 페이지를 읽어들이며 페이지의 구조와 컨텐츠의 중요성을 더 잘 이해하고 처리 가능
3. 웹 접근성 개선 : 스크린 리더기가 웹 페이지의 구조를 더 잘 이해할 수 있음
4. 웹 표준 준수 : HTML5 에서 권장하는 표준 준수
null 과 undefined 차이점
- null : 서버와의 통신에서 받아온 응답이 없거나 아예 변수에 값이 없다는 것을 명시함
- undefined : 변수에 아직 값을 할당하지 않았을 때의 기본값 또는 존재하지 않는 속성일 때 undefined가 할당됨
크로스 브라우징이란
IE, 크롬, 파이어폭스, 오페라 등, 여러 브라우저에서 동일한 기능과 레이아웃을 사용자에게 제공할 수 있도록 개발하는 것을 뜻한다. 예전 IE에선 FLEXBOX가 미지원이였던 것 처럼 브라우저마다 사용하는 엔진과 지원하는 기능이 다르기 때문에 동일한 UIUX를 제공할 수 있도록 노력해야함.
ex) SCSS 전처리기 사용시 package.json에 -webkit 설정으로 자동으로 크로스 브라우징을 해결할 수 있다.
Can I Use 홈페이지에서 웹 기술 지원 여부 확인 가능
CSS 전처리기
CSS 전처리기란 CSS를 보다 효율적이고 편리하게 사용하기 위한 도구이다.
- SASS / SCSS / LESS / Stylus
전처리기를 사용하여 코드 작성 후, 컴파일러를 통해 .css로 변환 작업
브라우저는 변환된 css 파일을 읽어들인다.
IR / IS 기법
IR (Invisible Replacement) 기법
텍스트를 시각적으로 숨기고 이미지나 스타일을 통해 대체하는 기법이다.
디자인 요구사항에 이미지만 들어가야 하는데 의도치 않게 텍스트도 필요할 때 사용한다.
SEO 최적화와 스크린 리더기를 통한 웹 접근성 향상에 도움을 줄 수 있다.
.logo{
display: block;
text-indent: -9999px;
background: url('./img/logo.png') no-repeat;
width: 100px;
height: 100px;
}
위와 같은 코드로 텍스트를 화면 밖으로 밀어낸 후, background 이미지를 통해 UI를 제공할 수 있다.
IS (Image Sprites) 기법
여러개의 이미지를 하나의 큰 이미지 파일로 결합해서 사용하고, 이를 background-position 과 같은 CSS적 요소로 조정해 사용하는 기법이다.
화면을 불러올 때, 서버에서 이미지를 여러개 불러올 필요 없이 하나의 큰 이미지 파일만 불러오면 되기 때문에 서버 트래픽이 대폭 감소한다.
naver 에서 IS 기법을 사용하고 있다.
CSS 우선순위
CSS는 일반적으로 후 정의 사항의 우선순위가 높게 책정된다.
- !important : 무한대 (사용을 웬만해선 지양)
- 인라인 선언방식 : 1000점
- id : 100점
- class : 10점
- 태그 선택자 : 1점
- 전체 선택자 * : 0점
- 부정 선택자 :not : 0점
- 가상 클래스 :hover... : 10점
- 가상 선택자 : 1점
flex-basis 설정시, !important 도 먹히지 않는다.
화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요
display: none; && visibilliy: hidden; 둘 다 스크린 리더기에 읽히지 않는다.
기존 게시글에 섹션 제목 숨기기에 작성했던 코드를 쓰면 되는 것 같다.
.hide{
position: absolute;
width: 1px;
height: 1px;
clip: rect(0,0,0,0);
margin: -1px;
padding: 0;
overflow: hidden;
border: none;
}
섹션 제목 숨기기 보단 조금 더 추가된 요소가 있긴하지만 혹시 모를 상속이나 기존 스타일에 대비해 padding 등
여러 요소 또한 0으로 초기화 해주면 될 것 같다.
DOCTYPE 사용 이유
DOCTYPE은 문서의 유형을 정의하는 태그이다.
DOCTYPE을 선언함으로써 브라우저는 해당 문서의 유형을 유추할 수 있게 된다.
만약 위 태그를 선언하지 않으면 브라우저는 해당 문서가 어떠한 유형인지 유추할 수 없기 때문에
비표준 모드(쿼크 모드)로 렌더링을 하게 되며, 이는 곧 브라우저의 환경에 따라 레이아웃이 깨질 수 있는 요소가 된다.
문서의 유형은 XHTML, HTML, HTML5 가 있다.
jpg, gif, png의 차이점
.jpg
장점
- 웹 상에서 이미지 및 사진을 전송할 때 사용하는 가장 보편적인 확장자
- 불필요한 정보는 삭제해, 용량이 큰 이미지를 작게 압축이 가능하다. 이로 인해 웹 사이트 로드가 빠르다.
단점
- 손실 압축 방식을 사용하기 때문에 원본에 비해 사진 품질이 떨어질 수 있다.
- 투명도가 있는 이미지에는 적합하지 않다. (투명 배경은 흰색으로 표현됨)
.gif
장점
- 움직이는 이미지를 지원한다.
- .jpg와는 다르게 투명도를 지원하고 있다.
단점
- 색에 대한 손실이 상당하다.
.png
장점
- 비손실 압축 방식을 사용하기에 사진 품질이 가장 높다.
- 투명도를 지원한다.
단점
- IE6 이하 웹브라우저에선 지원하지 않는다.
- .jpg 보다는 용량이 더 클 수 밖에 없다. (비손실 압축 방식)
::after && ::before
html에 새로운 태그 추가 없이 요소를 생성하거나 스타일링 할 때 사용한다.
::before : 요소의 앞에 추가할 때 사용
::after : 요소의 뒤에 추가할 때 사용
가상요소는 css3에 들어와서 :: 두개를 쓰지만 css2에선 : 한 개를 사용했다.
px / em / rem
px : 절대값
em : 해당 태그가 사용중인 font-size를 기준으로 px로 변환 후, 화면에 표시된다. 만약 해당 태그에 font-size가 미지정일 경우, 상위 요소의 font-size를 찾고 그 사이즈를 기준으로 변환한다.
rem : 최상위 엘리먼트(html)에서 지정된 font-size 의 값을 기준으로 변환한다. 일반적으로 기본값이 16px로 설정되어 있다.
.px{
font-size: 10px;
}
.em{
font-size: 10px;
width: 2em; /* 20px */
}
.rem{
font-size: 10px;
width: 2rem; /* 24px */
}
font-size: clamp(최소값, vw, 최대값); 속성을 이용해 반응형 폰트 사이즈 크기를 조정할 수 있다.
LTR
글을 왼쪽에서부터 오른쪽으로 읽는 방식
RTL
글을 오른쪽에서부터 왼쪽으로 읽는 방식
주로 아랍권 나라에서 RTL을 사용한다.
RTL UI 주의점
RTL은 읽는 방향이 우리나라와 반대이기 때문에 UI도 반대로 만드는 경우가 있다.
ex) 캐러셀