Jay

Semantic Tags(Semantic Markup) 의미가 있는이라는 뜻으로, 중요한 점으로는 첫번째 SEO(Search Engine Optimization) 검색을 최적화 하기 위해서 제목과 부제목, semantic tags들을 잘 활용한다면 제목과 부제목 같은 특징들을 잘 파악할 수가 있다. 두번째 Accessibility 웹 접근성으로 음성으로 읽어주는 스크린 리더를 이용하거나 또는 키보드만을 이용해서 웹사이트만을 이용하는 경우 적절한 시멘틱 태그로 잘 만들어진 웹사이트이면 스크린 리더등 키보드든 잘 동작하게 된다. 마지막으로는 개발자들의 유지보수성 측면인데, 개발자가 HTML 코드를 바라봤을 때 한 눈에 이런식으로 구조가 짜져있구나라고 판단할 수 있고 이게 유지보수성과 연관이 있다.(Maint..

HTML basic body Element는 HTML의 Markup 명령어이다. content와 함께 사용된다. 대소문자는 구분하지 않는다. element는 body부분안에 => 들어간다. element에는 여는 태그와 닫는 태그가 무조건 있어야 한다. 아래와 같이 예제를 보자 (Opening tag_내용_ Closing tag =>전체가 다 Element이다) Hello World! Attribute 하나 이상의 속성이면 공백 필요 속성 이름 뒤에 등호 따옴표 필요하다. class="Note" 이 부분은 Attribute이다. Hello World Nesting elements 중첩요소이고 요소안에 다른 요소를 넣는 코드 HelloWow World. Empty elements(Images) 빈요소이고 ..

반복적인 즉 중복되는 코드 작성을 최소화하고자 코딩을 간편하게 작성하게 위해서 CSS 전처리기 Post CSS가 있다. LESS나 SASS같은 것들도 있는데(스타일러스 포함) 이것을은 제공하는 거에만 맞춰서 쓸 수 있다. Post CSS는 플러그인이 굉장히 많고 다양한 장점들이 있다. PostCSS를 이용해서 모듈화를 해보자. 예제를 만들고자 하는 파일로 들어가서 아래 명령어 입력 mkdir PostCSS ls cd PostCSS yarn create-react app test yarn start 다른 cmder창에서 code . App.js에서 import React from 'react'; import './App.css'; import Button1 from './components/button1'..

미디어 쿼리 안에다가 root를 지정해주고 font size를 넣어주었다. @media screen and (max-width: 768px) { :root { /* Font size */ --font-large: 30px; --font-medium: 18px; --font-regular: 16px; --font-small: 14px; --font-micro: 12px; } ... @media screen and (max-width: 768px) style.css?_…6473290:560 .about__majors { flex-direction: column; } .about__majors { display: flex; justify-content: space-between; margin: 80px 0; ..

Hello, I'm Dream Coder One moer step for front-end developers Contact Me 홈 부분에서 를 고치니까 올바르게 나옴 Testimonials See what they say about me He is a passionate and very responsible person. Jay /Samsung He is a passionate and very responsible person. Jay /Samsung He is a passionate and very responsible person. Jay /Samsung 부분을 He is a passionate and very responsible person. Jay /Samsung 밑에다가 한개 더 붙이니까 ..

/* Global */ :root { /* Color */ --color-white: #ffffff; --color-light-white: #eeeeee; --color-dark-white: #bdbdbd; --color-pink: #fe918d; --color-dark-pink: #ff6863; --color-dark-grey: #4d4d4d; --color-grey: #616161; --color-light-grey: #7c7979; --color-blue: #73aace; --color-yellow: #fff7d1; --color-orange: #feb546; --color-black: #000000; /* Font size */ --font-large: 48px; --font-medium: 28p..

DOM요소 반영 주의해야 할 것은 DOM 요소에 추가하는 데이터들은 HTML 파일을 봤을 때 데이터들이 다 보인다. HTML 바디 안에 사용자가 정의한 데이터의 key와 value들이 들어가 있는것이 바로 보인다. 그래서 사용자에게 민감한 데이터는(보안에 조심해야 하는) 정보들은 돔요소에다가 추가해서 보관 하는 것은 좋지 않다.(암호화해서 JS안에 보관하자) 뭔가 로직을 처리하기 위한 정말 사용자에게 보여도 되는 그런 정보들이 있다면 데이터 속성을 이용해서 간편하게 작성할 수 있다.

Before .first-list { background-color: thistle; color: whitesmoke; margin-left: 8px; } .second-list { background-color: thistle; color: whitesmoke; margin-left: 16px; } After :root { --background-color: thistle; --text-color: whitesmoke; --base: 8px; } .first-list { background-color: var(--background-color); color: var(--text-color, red); margin-left: var(--base); } .second-list { background-col..

transform .box { width: 100px; height: 120px; background-color: brown; margin-bottom: 20px; } .box1 { transform: translateX(100px); } .box2 { transform: translate(-50px, -20px); } .box3 { transform: scale(1.2); } .box4 { transform: rotate(45deg); } .box5 { transform: translate(100px, 100px) scale(2) rotate(46deg); } transition

.box1 { background-image: url('https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp'); background-repeat: no-repeat; /* 창을 줄이거나 늘렸을 때 반복되지 않도록*/ background-position: center; background-size: cover; } .box2 { background: center/cover no-repeat url('https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp'); } .box3 { background: repeat l..