Web.d 썸네일형 리스트형 [React] ReactJS로 영화 웹 서비스 만들기 (Nomad Coders' course) https://joohaem.github.io/movie_app_react2021/#/ ## 깃 올리기 C:\Users\jooha\Documents\movie_app_react2021 > npm start > git init > git remote add origin https://github.com/joohaem/movie_app_react2021.git > git add . > git commit -m “메시지” > git push origin master ## React application을 로드할 때 빈 HTML을 로드하고, component에 작성한 react HTML을 밀어 넣음 -> virtual DOM -> public/index.html 의 id=”root” 부분에, src/index... 더보기 [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.. 더보기 이전 1 ··· 5 6 7 8 9 10 다음
