본문 바로가기
728x90

Study

 (31)
[HTML/CSS]CSS기초 | 텍스트 스타일 텍스트 스타일 Font-family: 글꼴 지정(두 단어 이상으로 된 글꼴일 경우 따옴표 사용, 지정 글꼴이 없을 경우 대비하여 두 번째, 세 번째 글꼴지정) @font-face: 웹 폰트 적용 | font-family: 글꼴 이름, src: url(글꼴 파일 경로), format(파일 유형) Font-size: 글자 크기 조절 절대 크기: xx-small, x-small, small, medium, large, x-large, xx-large 상대 크기: larger, smaller 크기: em, ex, px, pt로 직접 지정(주로 px사용, 모바일은 em사용), 백분율(%) Font-weight: 글자 굵기 지정(normal(기본값), bold, lighter, bolder, 100~900(400:..
[HTML/CSS] CSS 기초 | 스타일 우선순위 | 명시도 내부 스타일 시트: 태그 사이에 태그 안에 작성 외부 스타일 시트: 태그 사이에 태그를 이용해 연결 인라인 스타일: 해당 태그에 style속성 이용(간단한 스타일일 때 사용) 선택자에 따른 css 작성 방식 전체 선택자: * {속성: 속성 값;} 태그 선택자: 태그 {스타일} Id 선택자: #id명 {스타일} 그룹 선택자: 이름1, 이름2 … {스타일} 캐스캐이딩(Cascading) 스타일 우선 순위 사용자 스타일 시트 > 제작자 스타일 시트 중요 스타일 시트 = 뒤에 '!important'를 붙인 스타일 브라우저 스타일 시트: 브라우저 기본 지정 스타일 명시도(Specificity) 인라인 스타일 Id 스타일 클래스 스타일 태그 스타일 Source Order: 중요도와 명시도가 같다면 소스 서 적용, ..
[HTML/CSS] 반응형 레이아웃 CSS정리 Viewport(뷰포트) 스마트 폰에서 실제 화면이 표시되는 영역 기본형: 속성: width, height, user-scalable, initial-scale, minimum-scale, maximum-scale 가변 그리드 레이아웃: 전체를 감싸는 요소의 너비를 기준으로 각 요소 너비 계산 | (요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비)*100 가변 글꼴 Em 단위: 글자크기(em) = 글자 크기(px) | 1em = 16px Rem단위: 처음부터 기본크기를 지정하여 부모 요소의 크기에 따라 자식요소의 글자 크기가 바뀌는 em단위의 단점을 보완함 가변 이미지 | 태그의 srcset속성, , 태그 이용 가변 비디오 | 태그에서 max-width 속성 100%로 지정 미디어 쿼리 기본형: @me..
[HTML/CSS] 네비게이션(navigation) 용어 GNB(Global Navigation Bar) 사이트 전체에 동일하게 적용되는 최상위 전체 공통 네비게이션 메인메뉴, 대분류 메뉴, 전체 사이트에서 공통으로 사용되는 메뉴바 LNB(Local Navigation Bar) GNB 메뉴의 서브 메뉴형식으로 나오는 형태의 네비게이션 서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 특정 지역으로 가는 네비게이션 바 SNB(Side Navigation Bar) 일반적으로 왼쪽에 많이 위치해 있다. 서브메뉴를 제외한 나머지 사이드메뉴, 기타 메뉴바 FNB(Foot Navigation Bar) 하단 메뉴, 하단로고, 주소, 카피라이팅 영역
[HTML/CSS] ProgressBar 구현하기 진행바는 진행과정을 직관적으로 확인하기 위해 만든다. 대부분 등록할 때 사용된다. 완성 이미지 HTML code Step01 상품 기본정보 Step02 품목고시 Step03 상품소개 Step04 판매정보 Step02 옵션정보 Step03 추가정보 Step04 재고정보 CSS code .regist_step_ui {overflow: hidden; margin-bottom: 15px;} .regist_step_ui li {position: relative; float: left; width: calc(14% - 21px); margin-right: 28px;} .regist_step_ui li:after {content: ''; display: block; position: absolute; right: -..
[JS]자바스크립트 기초 | 자료 1. 문자형 String const name1 = "Mike"; //큰 따옴표(double quoto) const name2 = 'Mike'; //작은 따옴표(single quoto) const name3 = `Mike`; //백틱(backtick) const message = "I'm a boy"; const message2 = 'I\\'m a boy'; const message3 = `My name is ${name}`; const message4 = `나는 ${30-2}`살 입니다.`; 문자형은 위에서 보는 것과 같이 3가지로 사용이 가능하며, message2처럼 작은 따옴표를 사용하고 싶을 때에는 '\'를 앞에 넣어주면 특수문자로 인식한다. 백틱은 문자열 내부에 변수를 넣을 때 편리하다. 2. 숫..
[JS] 자바스크립트 기초 | 변수 name = "Mike"; //문자열은 쌍따옴표로 감싸야한다 age = 28; 자바스크립트에서 class와 같은 예약어(Reserved Words)라고 하며, 변수명으로 사용할 수 없다. alert() : 경고창을 띄우는 함수 console.log() : log를 찍는 함수 let은 변할 수 있는 값을 선언 const는 변하지 않는 값을 선언 (처음에 const로 선언 후, 변할 수 있는 값을 let으로 변경) 카멜 표기법(Camel case, 낙타 표기법) 변수는 문자와 숫자, $와_만 사용 첫 글자는 숫자가 될 수 없다. 예약어는 사용할 수 없다. 가급적 상수는 대문자로 알려줘야한다. 변수명은 읽기 쉽고 이해할 수 있게 작성해야한다.

티스토리툴바