Front-end/CSS 7

[ CSS 레이아웃 ] 상세_menuBar

0. 만들어야 하는 menuBar체크 # 통합 메인 파일에서 자리 잡아 놓은 div에서 작업 # 메인메뉴와 서브메뉴 작업 ul> li에서 로 메인 메뉴 만들고 ul> li> ul> li에서 로 서브 메뉴 잡아준다. 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 # 구조 잡고 내용 채우기 # 높이랑 너비는 임의로 지정 본 파일에서 사이즈를%로 적용해놓아서 정확한 값 몰라서 일단 임의 값으로 지정 후 작업 2. 스타일 적용/해제 해주기 2-1 , , 기본 적용되어있는 속성 제거 및 위치 잡기 2. ul>li { float : left } - 들 순서대로 만들어주기 3. 서브메뉴들 숨겨주고 – 메인메뉴:hover..

Front-end/CSS 2022.06.22

[ CSS 레이아웃 ] 상세_searchBar

0. 만들어야 하는 footer 체크 # 3개의 div 중 2번째 div에서 작업 # 안에 div2개로 나눠서 작업 input text 들어갈 div input submit 들어갈 div 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 #헤더의 3개 부분 중 가운데 header_2에서 작업 #header_2 : 높이랑 너비는 임의로 지정 본 파일에서 사이즈를%로 적용해놓아서 정확한 값 몰라서 일단 임의 값으로 지정 후 작업 2. 내용 채우고 스타일 적용해서 위치 잡아주기 2-1 아래의 div>input / div>input 해서 작업 # input 태그는 정보 전달 목적 - key/value 필요하다 - name/value 필요 2-2 안에 요소들 높이/너비 지정해서 틀 잡기 2-3...

Front-end/CSS 2022.06.22

[ CSS 레이아웃 ] 상세_loginForm

0. 만들어야 하는 login폼 체크 ## div3개 중에서 3번째 div에서 작업 ## 2개의 div로 나눠서 작업 아이디 / 비밀번호 / 로그인 들어갈 div1 회원가입 / ID-PWD 찾기 들어갈 div2 ## div1 은 다시 나눠서 작업 아이디 비밀번호들어갈 div와 로그인 들어갈 div 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 # CHECK 링크 영역 form 태그 안에 안쓰고 밖에 해준 이유? 데이터 전달 – 로그인 id / pwd 전달해주기 위한 목적으로 2. 스타일 적용해서 틀 잡아주기 2-1 #content_3: 높이랑 너비는 임의로 지정 본 파일에서 사이즈를%로 적용해놓아서 정확한 값 몰라서 일단 임의 값으로 지정 후 작업 2-2 안에 요소들 높이/너비 지정해서 틀 잡기 3. ..

Front-end/CSS 2022.06.22

[CSS 레이아웃 ] 상세_footer

0. 만들어야 하는 footer 체크 div 2개로 나눠서 위치 잡아주고 밑에 div쪽은 다시 div 2개로 나눠서 작업 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 새로운 파일 생성 #footer : 높이랑 너비는 임의로 지정 원래 파일에 #footer 크기 지정되어있음 #footer_1 , #footer_2 틀 잡기 #footer_2 안에는 2개로 구성 가 기본적으로 마진을 잡고 있어서 --- 마진 없애는 작업 필요 2. 푸터 안쪽 내용 채우기 2-1. #footer_1 채워주기 a태그 | 만들기 2-2 #footer_2 채워주기 내용은 KH홈페이지 복사 붙여 넣기 해서 채워줬음. 스타일 적용해주기 상세_footer - 완성

Front-end/CSS 2022.06.22

CSS : CSS 속성 기본2

BOOK : 모던 웹을 위한 HTMl5 + CSS3 바이블 폰트 속성 font-size px, em, large, small 등 사용 (h1-32px, p-16px 기본 값) font-family 사용자 컴퓨터에 설치 된 폰트 사용 font-style , font-weight 폰트의 기울기 / 두께를 조정하는 속성 line-height 글자의 높이를 지정, 글자 수직 중앙정렬할때 사용 text-align center, right 등 ( inline 형식의 태그에는 적용안 됨) text-decoration : none; a링크 href속성 글자에 밑줄 없애줌. 색은 별도로 지정 font-family 한 단어의 폰트는 따옴표 사용 X, 두 단어 이상 폰트는 반드시 사용 설치되어있지 않을 상황 대비해 font..

Front-end/CSS 2021.12.19

CSS : CSS3 스타일 단위-속성 기본

BOOK : 모던 웹을 위한 HTMl5 + CSS3 바이블 CSS3 속성 단위 크기 단위 백분율 단위 / 배수 단위 / 픽셀 색상 단위 < #000000 / rgb / rgba / hsl / hsla HEX 코드 단위 / RGB 색상 단위 / HSL 색상 단위 url 단위 < url('Desert.jpg') / url('other/Desert.jpg') 현재 폴더의 / 현재 폴더 내부 other 폴더의 Desert 파일 크기 단위 전체 폰트 크기에 절대 크기를 지정하고(px) 난 후에 각각 태그에 상대크기를 지정하는(%, em) 방법이 많이 사용 100%가 초기에 설정된 크기 // 1.5배=1.5em=150% 상대적 크기 // 16px, 20px은 절대적 크기 색상 단위 rg..

Front-end/CSS 2021.12.19

CSS : CSS 선택자

BOOK : 모던 웹을 위한 HTML5 + CSS3 바이블 CSS 선택자란? CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능 선택자를 사용해 특정한 HTML 태그를 선택한 후 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있다. 이러한 코드를 CSS 블록이라고 부름 style 태그 내부에 입력해 사용함. 이때 style 태그 내부에 입력되는 코드를 스타일 시트라고 부른다. CSS 선택자 선택자 종류 선택자 형태 선택자 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #header 클래스 선택자 .클래스 .item 후손 선택자 선택자 선택자 header h1 자손 선택자 선택자 > 선택자 header > h1 속성 선택자 선택자[속성=값] input[type..

Front-end/CSS 2021.12.18