728x90 css16 [CSS] 변수 Variable 사용하기! CSS 변수(variable) 사용 CSS 코드의 가독성과 유지보수를 위해서는 변수의 사용을 권장한다. 변수의 선언은 어디서나 가능한데 변수의 선언은 원하는 변수 이름 앞에 -- 를 붙여주면 된다. 변수의 사용은 var 함수를 통해 가능하다. 변수의 선언과 사용 //변수 선언 예 --background-color : blue; //변수의 사용 예 background : var(--background-color); 하지만 하단의 예시와 같이 변수의 선언을 셀렉터 스코프 안에서 선언한다면, 다른 언어의 지역변수의 기능과 비슷하게 해당 엘리먼트에서 밖에 변수를 사용할수 없다. 셀렉터 내 변수의 선언과 사용 .selector { //변수의 선언 --background-color : orange; //변수의 사용.. 2021. 3. 12. [CSS] Background 속성 CSS background-image background-repeat background-size background-position background 관련 속성 background-image : 이미지 주소, 경로 background-repeat : 이미지 반복 여부 background-size : 이미지 사이즈 자동 축소 확대 background-position : 이미지 중앙부 포커스 출력 CSS Selector { background-image : url('이미지주소'); /*이미지 반복 여부*/ background-repeat : no-repeat; /*이미지 중앙부 포커스 출력*/ background-position : center; /*커버에 맞춰 이미지 사이즈 자동 축소 확대*/ back.. 2021. 3. 4. [CSS] transform - Translate 수평, 수직 정렬 CSS 수평 수직 정렬 Transform - translate CSS 를 사용하다보면, 좌우,상하 가운데 정렬을 해야할 일이 많다. 가운데 정렬할수 있는 방법에는 다양한 방법이 있지만, transform 속성 또한 상당히 많이 사용이 되고 있다. CSS Selector { transform : translate(좌우, 상하); } 샘플예제 출력 결과 코드 수정 .container > .box { width : 200px; height: 200px; background : royalblue; /*하단의 코드 추가*/ transform : translate(100%,100%); } 출력 결과 2021. 3. 4. [CSS] box-sizing border-box content-box CSS 박스 사이즈 관련 속성 box-sizing CSS에서 박스의 크기를 지정하였는데도 원하는 크기로 안바뀌는 경우에는 css의 box-sizing 속성을 확인해볼 필요가 있다. CSS Selector { box-sizing : content-box; (기본값) box-sizing : border-box; } box-sizing 속성을 content-box로 하면, 설정해놓은 사이즈는 padding, border 속성의 사이즈를 제외한 박스 자체의 사이즈로 설정이 된다. 즉, width 와 height 를 100px로 설정해 놓아도, border : 5px; padding : 5px 으로 설정하게 되면, width 는 120px이 되는 것이다. padding, border 의 설정 사이즈를 포함하여 원.. 2021. 3. 4. [CSS] BEM (Block Element Modifier) 표기법 코드는 가독성이 중요하다. 하지만 코드양이 많아지면 그만큼 클래스명도 다양해지고 구조 또한 복잡해진다. 그래서 클래스 명의 명확성과 일관성, 의미론을 유지할수 있는 CSS 표준에는 BEM 표기법이 있다. BEM 은 Block Element Modifier 의 약자이다. 클래스 이름 안에 언더바 두개씩 있고, 마이너스 표시가 그 뒤에 두개씩 있는 경우를 접해본적이 있다면, 그게 BEM 을 활용한 클래스의 표기이다. 예시) main__item--blue 하지만 간혹 보면 BEM 표기법을 아이디에 사용하는 경우도 종종 있는데, 이는 잘못된 방법으로, 클래스에만 사용하여야 한다. 하단의 간단한 예제를 통해 BEM 의 의미를 이해하도록 하자 샘플 예제 Html 설명 Block : Element : Modifier.. 2021. 3. 4. [프론트엔드] 쇼핑몰 상품 정렬 코드샘플 (Html,Javascript,Css) Sample Code 쇼핑몰 상품 정렬 코드 샘플 HTML5 , Vanilla Javascript, Css3 1. 설명 : 온라인 쇼핑몰에서 흔히 볼수있는 상품 정렬 코드 샘플이다 2. 사용언어 : Javascript, Html, Css [플러그인 사용 x] 3. 구동 로직 - 상품 Sample 이 없어서 짱구는 못말려 케릭터로 대체 (1) fetch API 를 통해 서버측의 json 데이터 Get (2) json파일(상품 객체 리스트) 저장 (3) 해당 리스트 출력 (4) 이후 선택 옵션에 따른 filter 처리 후 출력 [샘플 코드 :Html] 짱구 철수 유리 훈이 [샘플코드 :Css] :root{ /* color */ --color-white : #f4f9f9; --color-black : #0d335d; --color.. 2021. 2. 24. 이전 1 2 다음 728x90
