본문 바로가기

국비필기노트/HTML,CSS,JS_Starbucks

 (10)
CSS_가로정렬(float, flex, inline-block) ▶inline-block inline-block은 inline속성이 기본적으로 가지고 있는 텍스트 성질을 가지고 있어서 block안에 기본적인 여백값이 생긴다. 이를 없애줄 순 있으나 호환성 문제가 생길 수도 있다. 그래서 보통 텍스트 양 옆에 어느정도의 여백이 있고 가로정렬인 디자인일 때 주로 사용된다. ▶float: right float는 HTML 초창기에 오로지 문서전달과 간단한 이미지를 출력하기 위해 고안된 것이었다고 한다. 워드나 한글의 이미지와 한글 "글자처럼취급"기능처럼 어떤 글의 흐름을 따라 이미지를 삽입하면 흐르듯 글과 이미지가 합쳐진다. 단, 이미지 레이아웃을 위해 만들어진 기능이 아니기에 float를 사용하면 뒤의 태그까지 모두 영향을 주게되고 이는 clear: both; 로 컨트롤을..
CSS_transform(변환) ▶transform 이란? 요소를 변환시켜주는 속성으로 다양한 변환함수를 사용하여 요소를 원근법 이동 크기 회전 기울임을 하는 변화의 효과를 줄 수 있다. ▶2D 변환함수 ▷이동(px) translate(x,y) / translateX(x) / translateY(y) X,y값으로 값을 이동시켜줄 수 있다. ▷크기(px) scale(x,y) x,y값만큼 객체의 크기를 변경시켜줄 수 있다. 한쪽만 크기를 키우면 객체가 찌그러지기때문에 보통 x혹은 y 하나가 아닌 한번에 두개를 모두 입력해준다. ▷회전(degree) rotate(deg) 해당 각도의 수치많큼 요소를 2D로 회전시킨다. ▷기울임(deg) skewX(x) / skewY(y) 객체를 마름모형으로 변경할 수 있게 만들어주는 함수로서, x와 y축에 ..
CSS_가운데 정렬 ▶Margin: auto ▷Margin auto란? auto는 개체가 상위 컨테이너의 중앙에 위치하는 것으로 자연스럽게 좌우여백은 균등하게 배분된다. ▷주의사항 1) 폭의 연산이 불가능하면 가운데 정렬을 할 수 없다. Width값을 정확히 입력시켜주거나 overflow:hidden 을 해준다. 2) block 속성만 margin으로 처리가 가능하다. inline 속성을 가운데 정렬시키고싶다면 display: block;을 시켜준다. 3) position: absolute와 relative를 통해 가운데 정렬의 기준점을 명확하게 해준다. 4) left: 0, right: 0값도 입력시켜주는 것이 좋다. ▶text-align : center 부모요소가 block이고 자식요소가 inline일 때 부모요소에 t..
CSS_BEM 명명기법 ▶BEM 이란? CSS를 작성할 때 좀 더 효율적이고 유지보수고 쉽도록 해주는 일종의 규칙이다. B (Block) E (Element) M(Modifier)으로 구조를 나누어서 class 이름을 작명하는것으로 이 규칙을 적용하면 모듈화가 편해 코드의 재사용성이 올라간다. ▶BEM 주의사항 ID에는 사용할 수 없고 오직 클래스명에서만 활용할 수 있다. ▶A -- B btn--success, btn--error 등 B는 A의 상태를 의미한다. ▶A __B item__name, contents__menu 등 B가 A에 속해있음을 뜻한다. 이를 통해 CSS에서 굳이 HTML로 가지않아도 class명을 통해 해당 name은 item의 해당 menu는 contents의 것임을 직관적으로 알 수 있다.
CSS_마진(Margin)과 패딩(Padding) ▶마진(Margin)과 패딩(Padding)이란? 마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백이고 패딩(Padding)은 컨텐츠 안쪽의 여백을 의미한다. ▶마진(Margin)과 패딩(Padding) 입력방법 ▷4개 값 입력시 상 -> 하 -> 좌 -> 우 ▷3개 값 입력시 상 -> 좌/우 -> 하 ▷2개 값 입력시 상/하 -> 좌/우 ▷1개 값 입력시 상/하/좌/우 모두 동일한 마진 혹은 패딩값 *Reference https://alonehistory.tistory.com/10 마진(Margin)과 패딩(Padding)의 차이와 입력 방법 마진(Margin)과 패딩(Padding)의 차이 - 마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백을 의미합니다. - ..
CSS_속성(Inline, block, Inline-block) ▶block 한 영역을 차지하는 박스형태를 자기는 성질이다. 그렇기에 기본적으로 block은 width값이 100%가 되며 block 다음 block을 넣을 경우 쌓이는 형태로 출력되게된다. -. block은 height와 width값을 지정할 수 있다. -. block은 margin과 padding을 지정할 수 있다. , , , , , , , , , , ,, , , , , , , , , , , ▶inline 주로 텍스트를 주입할 때 사용되며 width와 height값은 컨텐츠 영역만큼 자동으로 잡히게된다. inline끼리 추가로 입력을 하면 한 줄로 선처럼 쌓이게된다. -. width와 height를 명시할 수 없다(input, textarea, select, img 제외). -. margin은 위아래..
CSS_가상요소(After,Before) ▶After *HTML Content! *CSS box::after{ content : "뒤!" ; } *출력내용 Content!뒤! 요소를 뒤에 삽입하는 기능으로서 어떤 내용을 삽입할지 반드시 기입해주어야한다. ▶Before *HTML Content! *CSS box::before{ content : "앞!" ; } *출력내용 앞!Content! 요소를 앞에 삽입하는 기능으로서 어떤 내용을 삽입할지 반드시 기입해주어야한다. ***After와 Before 모두 width,height와 같은 속성을 만들 수 있다. 단, 가상요소는 inline형태로서 display = block;으로 block요소로 변경해주어야한다.
CSS_복합선택자 ▶CSS 선택자란? 선택을 해주는 요소로서 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다. ▶복합선택자 ▷일치선택자 선택자 2개를 붙혀서 사용하며 선택자 A와 B를 동시에 만족시킨다. *HTML *CSS span.orange => 태그가 span이면서 orange라는 클래스를 가지고 있는 요소이다. ▷자식선택자 선택자의 자식요소를 선택한다. *HTML 오렌지 *CSS ul > .orange{} => class가 오렌지인 요소를 찾는데 조건은 ul 태그인 자식을 찾는다 ▷하위(후손)선택자 선택자의 하위요소를 선택하며 띄어쓰기가 선택자의 기호이다. *HTML 오렌지 딸기 사과 오렌지 *CSS div .orange{} =>div의 후손인 모든 orange 클래스를 찾는 것이다. 그래서 여기서..
프로젝트 세팅 checkList ▶본인이 사용할 이미지, 아이콘을 프로젝트 파일에 정리 ▶favicon.ico 로 로고 아이콘 저장 favicon.ico 라는 이름으로 이미지 이름을 지정하면 자동으로 로고 아이콘을 찾아준다. ▶CSS 스타일 초기화 https://www.jsdelivr.com/package/npm/reset-css ▶HTML과 CSS , JS 연결
스타벅스 프로젝트 0. 머리말 HTML, CSS, JS를 사용하여 스타벅스 홈페이지 클론코딩 패스트캠퍼스 강의 참고 1. 사용프로그램 HTML, CSS, JS 2. 프로젝트 사이트 https://stellar-genie-009c4f.netlify.app 스타벅스 커피 코리아 스타벅스 커피 코리아 starbucks.co.kr

티스토리툴바