HTML5_CSS3
-
input 커스텀 정리(태그 구조로 분류)HTML5_CSS3/자주 사용하는 것 2024. 7. 12. 14:18
input 커스텀 정리내 입장에서는 기본 input을 사용하는 게 여러모로 편리하겠지만, 100중에 90은 디자인된 input이 주어진다.나는 주로 label을 커스텀하는 방식을 많이 사용했었는데, 이는 아래와 같은 장단점을 가진다. ➡️ input + label의 구조 / label에 커스텀하기input 뒤에 label이 오는 구조로 잡고, input은 {display: none;appearance: none}처리 후 label을 커스텀하는 방법 Click me "> HTML 삽입미리보기할 수 없는 소스/* 숨긴 input 요소 */input[type="checkbox"] { display: none; appearance: none;}/* 커스텀 la..
-
a태그와 button 그리고 inputHTML5_CSS3 2023. 5. 23. 11:38
a태그와 button 그리고 input 우리가 일반적으로 생각하는 버튼을 만들 수 있는 방법에는 3가지가 있다. a 태그 사용 button 태그 사용 input 태그 사용 프로젝트 제작 당시, 각각의 일반적인 개념을 갖고 있었지만 '키보드 tab처리를 해야되는 중요한 부분에는 a 태그로 처리해라' 라는 배움만을 생각해 대부분의 버튼 태그를 a 태그로 처리했었다🤔(사전과제 본 후 면접봤을 때도 이 부분에 대해 질문받음) 화면 자체로만 봤을 때는 문제가 되진 않겠지만, 하지만 중요한 것은 생긴 것보다는 ⭐어떤 역할을 하느냐가 중요하다는 것⭐ (시맨틱하게 마크업하기 위해서는 역할에 대해 생각하는 것이 중요하다) *해당 태그는 최소 44*44 권고* 📍a 태그 anchor 태그로 다른 페이지나 같은 페이지의 어..
-
네이밍 방법론 (케이스 스타일, 네이밍 컨벤션)HTML5_CSS3 2023. 4. 7. 12:33
CSS에서 스타일링을 하다보면, 클래스 이름을 무분별하게 작성하는 나를 발견한다. 최소한의 카멜케이스 또는 스네이스케이스를 사용한다거나, 의미 파악이 안되는 작명을 하지 않는다는 정도..? 👉 그러나 코드 일관성 유지 및 유지 보수와 함께 가독성을 위해서는 꼭 규칙에 맞게 작명을 해주는 습관이 좋다. 네이밍 / 작명에 대해 1) 케이스 스타일 1. 카멜 케이스 : 낙타의 모양을 따와 만든 표기법, ex) camelCase 2. 스네이스 케이스 : 뱀의 모양을 따와 만든 표기법, 띄어쓰기를 언더바 _ 로 연결해 표기 ex) snake_case 3. 케밥 케이스 : 케밥의 내용물이 연결된 모양을 따와 만든 표기법, 하이픈 - 으로 연결해 표 ex) kebab-case 4. 파스칼 케이스 : upper cam..
-
Sass(SCSS) 기본 공부 3 중첩HTML5_CSS3/sass 2023. 4. 6. 02:23
Sass(SCSS) 기본 공부 1 https://raim-2.tistory.com/17 Sass(SCSS) 기본 공부 2 https://raim-2.tistory.com/18 Sass/SCSS 중첩 (Nesting) Sass에서는 중첩이 가능하다. 중첩은 일반 CSS보다 더 깔끔하고, 구조 및 선택자 파악이 쉽다는 장점이 있다. 첫번째 두번째 1. 중첩 사용방법 중첩을 사용하는 방법은 간단하다. 아래 예시처럼 중첩하고 싶은 만큼 대괄호 {} 안에 자식 선택자를 넣으면 된다. $txt_color:#fff; $bg_color : background-color; $font_size : 18px; $my_border : 1px solid #ddd; ul{ li { #{$bg_color} : black; bord..
-
Sass(SCSS) 기본 공부 2 변수HTML5_CSS3/sass 2023. 4. 6. 00:45
Sass/SCSS 공부 2 Sass(SCSS) 기본 공부 1 https://raim-2.tistory.com/17 Sass(SCSS) 기본 공부 1 *나나님의 아무튼 Sass 시리즈 + W3school 을 보고 공부합니다. CSS 전처리기 자신만의 문법을 가지고, CSS 생성하도록 하는 프로그램 CSS의 단점인 단순 반복 등을 보완하기 위해 생긴 프로그램 정규 CS raim-2.tistory.com Sass/SCSS 변수 (variables) Sass에서는 반복적으로 사용되는 값을 변수로 사용이 가능하다. 변수는 $기호를 사용해 선언할 수 있다. 변수의 값으로는 문자열, 숫자, 불리언, 색상, null 등 다양한 값을 담을 수 있다. 변수는 CSS로 컴파일하면, CSS 파일에 보이지 않는다. //$변수명..
-
Sass(SCSS) 기본 공부 1HTML5_CSS3/sass 2023. 4. 5. 00:02
*나나님의 아무튼 Sass 시리즈 + W3school 을 보고 공부합니다. CSS 전처리기 자신만의 문법을 가지고, CSS 생성하도록 하는 프로그램 CSS의 단점인 단순 반복 등을 보완하기 위해 생긴 프로그램 정규 CSS에 없는 다양한 내장함수를 갖고 있고, 변수/ 함수 생성도 가능하다. CSS 전처리기는 기본 브라우저에 탑재되어 있지 않으므로, 컴파일 과정을 통해 사용해야 한다. 더보기 결국, CSS 전처리기를 사용하려면 1) 우선 CSS 전처리기를 사용해 코드를 작성한다. 2) CSS 컴파일러를 이용해 CSS 전처리기를 CSS로 컴파일한다. *컴파일러 설치 대신 컴파일만 하려면 사이트에서도 가능하다. Sass 컴파일 사이트 : https://www.sassmeister.com/ (테스트 가능) 1. ..
-
크로스 브라우징 도대체 어떻게 하는건가?HTML5_CSS3 2023. 4. 4. 00:39
크로스 브라우징이란? 크로스브라우징이란 간단하게 다양한 환경이나 브라우저에 동일하게 화면이 처리 / 표시되도록 하는 것 👉👉 모든 것을 100% 똑같이 보이게 처리하려고 하는 것보다는, 어느 한쪽에 치우치지 않도록 공통 요소를 사용해 웹페이지를 만드는 것이며 그로 인해 브라우저나 환경에 따라 정보로서 소외감을 느끼지 않도록 하는 것을 의미한다. 크로스브라우징 실무, 크로스브라우징 하는 법 검색을 해봐도 사실 명확하게 답을 주지 않는다. 그 중에서도 정리하자면, 태그 reset을 해준다. 1) 각 브라우저마다 태그의 기본값이 다르므로 기본값의 차이를 없애기 위, 태그 reset을 해줄 것 *reset은 회사의 필요에 따라 본인에게 맞는 것을 사용 + 추가할 것 추가해서 사용한다. - https://meye..
-
반응형 단위(레이아웃과 폰트사이즈)HTML5_CSS3 2023. 4. 1. 01:07
1. 반응형 레이아웃 1. 전체적인 레이아웃 요소들은 %로 레이아웃을 잡아준다. (100% 기준) 더보기 1) 큰 레이아웃의 요소들은 / / / / width:100% 기준으로 2) 단의 구성 float와 해당 단을 100%로에서 나눠준다. 4단이면 width: 25% 3) 터치영역은 최소 44pxdisplay:block; height/width/padding 을 사용해서 터치영역 확장시켜 준다. 2. 10~20 정도의 약간의 여백, padding 또는 margin은 px로 처리 3. rem을 사용할 때는 구성할 때 px로 구성 후 rem단위로 환산해준다. 1번 방법) - 요소에 display:inline-block을 주고, width 값에는 100%를 요소의 개수로 나눈 값으로 지정해준다. - widt..