분류 전체보기 썸네일형 리스트형 [HTML] 시멘틱 태그 (Semantic Tag) 개념 시멘틱은 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다 우리는 box모델은 div/ inline모델은 span으로 사용할 수 있지만, 의미론적인 HTML 태그를 사용하여 기계가 코드를 잘 이해할 수 있도록 한다 왜 이렇게 구조화를 해야할까? 웹 문서에 들어 있는 정보 탐색이 중요한 시대가 왔기 때문이다 수많은 정보들 중 검색 엔진이 좋아하는 웹 사이트를 만들어야 탐색이 쉬워져 웹 사이트의 가치가 올라간다 이와 같은 의미론적인 HTML 태그를 시멘틱 태그라고 부르고, 이를 기반으로 한 웹을 시멘틱 웹이라고 부른다 종류 문서의 구조화 태그 : 웹 문서의 메인 컨텐츠 : 웹 문서나 섹션의 머리말 ( or 태그 내에서도 사용) : 하이퍼링크를 모아 놓은 섹션/ 목차로 주로 사용 : 웹 .. 더보기 네이밍 컨벤션(Naming Convention) - 스네이크/ 케밥/ 카멜/ 파스칼/ 헝가리언 표기법 스네이크 케이스 html class 명으로 주로 사용된다 단어 사이를 띄어쓰기 대신 언더바( _ )로 연결하여 쓰는 방식이다 언더바가 뱀을 연상시켜 "스네이크 표기법"라고 불린다 ex) snake_case 케밥 케이스 html class 명으로 주로 사용된다 단어 사이를 띄어쓰기 대신 하이픈( - )으로 연결하여 쓰는 방식이다 하이픈이 고기를 꼬치에 끼운 케밥같아서 "케밥 표기법"라고 불린다 ex) kebab-case 카멜 케이스 html id 명으로 주로 사용된다 + JS의 함수 명명 단어 사이를 띄어쓰기 대신 대문자로 표기하는 방식이다 낙타의 등과 같아 "단봉낙타 표기법"이라고 불린다 ex) camelCase 파스칼 케이스 + JS의 객체 명명 단어의 시작을 모두 대문자로 표시한다 프로그래밍 언어 파.. 더보기 [실습][부스트코스] 웹 UI 개발 프로젝트C - 반응형 웹페이지 만들기 영상 반응형 (모바일-태블릿-PC) IR 기법 메뉴 숨김 처리 (햄버거 버튼) 로고 이미지 섬네일 이미지 말 줄임 처리 이미지 리스트 셀렉트 박스 화살표 이미지 반응형 (모바일-태블릿-PC) 리스트 UI 테이블 UI 이미지 UI 더보기 [CSS] 말 줄임 표시하기 (... 표시) 한 줄로 줄임 CSS 다음은 텍스트가 한 줄이 넘어갈 때 ... 표시로 말줄임 표시를 하는 CSS 코드이다 .title { // 넘어가는 텍스트를 표시하지 않음 overflow: hidden; // 텍스트가 넘어가면 ...으로 표시함 text-overflow: ellipsis; // 텍스트가 넘어가도 줄 바꿈을 하지 않음 white-space: nowrap; } n 줄로 줄임 CSS 다음은 텍스트가 넘어갈 때 n번째 줄에서 ... 표시로 말 줄임 표시를 하는 CSS 코드이다 .title { // webkit-box 기능 이용 (Flexible Box Model) display: -webkit-box; // 한 줄과 동일 overflow: hidden; // 한 줄과 동일 text-overflow: ell.. 더보기 [CSS] 이미지 딤드 처리하기 (dimmed image) / 이미지 액자 효과 기법 / opacity와 background: rgba HTML 코드 img 태그를 감싸는 img_box 태그를, 형제 태그로 텍스트 태그를 작성한다 스누피 snupi.tistory.com.snupi.tistory.com 액자 효과 기법 CSS 코드 1. 이미지 액자 효과를 위해 img와 동일한 사이즈로 width와 height를 설정한다 2. 그리고 반투명한 컬러 적용을 위해 rgba 속성을 사용하고 3. 그 위에 글자를 배치시킨다 +. 그리고 img 위로 border가 나와야 하므로 absolute를 사용을 통해 이를 해결한다 여기서, 보더를 가지는 html 태그를 추가해서 만들 수 있으나 시멘틱 마크업을 위해 :before, :after 같은 가상 선택자를 사용하여 구조를 추가하는 것이 좋다 즉, 불필요한 태그 사용을 자제한다 주요 CSS 코드는 다음과.. 더보기 이전 1 ··· 16 17 18 19 20 21 22 ··· 38 다음
