HTML & CSS

HTML & CSS

CSS 적용 우선순위 (Specificity), JS로 style 다루기

두 줄 요약 CSS 적용 순서 : !important;(사용금지) > inline > id > class > tag inline CSS 모두 날리기 : element.style = ""; 출처는 이번에도 Kyle 형님이다. 대단한 형님이다. 공부한 내용을 정리해본다. youtu.be/CHyPGSpIhSs 코드펜 See the Pen CSS Specificity Practice by Richard JEON (@hj-rich) on CodePen. 정리스샷 CSS 적용에 관한 명확도 규칙 : CSS Specificity 1. 명확하게 지칭할수록 적용순위가 높다. !important > inline > id > class > tag (단, important는 절대 사용하지 않는다. NAVER) 2. 마치 금은..

HTML & CSS

CSS에 변수와 계산식을 사용해보자! - calc(var(--myVar) + 180px)

두 줄 요약 : css 전역변수 선언과 호출, css에 calc를 이용한 계산식 사용 1. :root { --myWidth: 180px; --myColor: 180;} 2. width: calc(100% - var(--myWidth)); background-color: (calc(var(--myColor) + 100), 51, 180); 출처 : youtu.be/x7EWFoRzAkk Web Dev Simplified 라는 채널을 운영하고 있는 Kyle 형님이다. 잘생기고 목소리도 좋고 캠위치와 크기, VS code와 live server 화면분할, 단계적 레슨, 활용도까지. 정말 어마무시한 형님이다. 매 영상마다 시작할 때 너의 드림 프로젝트를 시작할 수 있게 웹을 심플하게 해주려 한다는데 암튼 정말 어..

HTML & CSS

링크 공유될 때 제목과 내용, 이미지 설정하기 : <meta property="og:title" content="!!"> + SEO 구글 검색에 노출시키기

URL을 공유할 때 제목과 설명, 이미지를 설정해보자 1 2 3 4 5 6 7 8 cs meta 태그의 author, description은 SEO를 위해 사용되고 property는 링크 공유 시 상세 정보 전달을 위해 사용된다. og:image는 외부에서 이미지를 가져올 수 있어야 하기 때문에 이미지 링크를 통해 전달해야할 듯 싶다. 이미지는 가로 세로가 같은 비율인 것으로 사용해야할 듯 싶다. 안 그러니 짤리네.. title과 description이 실제로 전달할 핵심 내용이 아닐까 싶다. 한글이 깨지고 저장시 오류가 나는 문제가 있었는데 첫줄의 내용이 빠져서였다. 이 파일은 템플릿 파일이고 한글이 들어온적이 없었어서 지금까지 문제는 없었는데 한글이 들어오려면 템플릿 파일로 합친다고 하더라도 모든 파..

HTML & CSS

HTML, Tomcat, JAVA의 시작 2020-05-25 : HttpServlet

HTML을 시작했다 (어제). JSP와 Servlet은 컴포넌트, 톰캣은 컨테이너 라고 간단하게 개념정리를 하고 시작했다. 톰캣을 통해서 JSP와 Servlet을 처리하는 거다. 1. 톰캣 설치 및 환경변수 설정 Win+R -> sysdm.cpl ,3 -> 환경변수 진입 시스템변수에 이름 CATALINA_HOME 경로 톰캣 설치위치 (나는 C:\Tomcat) 설정 완료 확인을 위해 cmd가 실행중이라면 재실행 후 set catalina_home 입력해서 경로가 나오는지 확인 2. html 작성 및 접속하기 자바에서 java -> package -> project 라면 톰캣에서 Context는 project의 느낌이다. default Context가 webapps\ROOT\ 이다 톰캣 설치 경로 내 web..

리차드
'HTML & CSS' 카테고리의 글 목록