웹 기록용

position 정의문서 상에 요소를 배치하는 방법을 정의하고 top, bottom, right, left 로 최종 위치를 결정한다top : 윗면을 기준으로 #만큼 떨어져 위치하게 됨bottom : 아랫면으로부터 #만큼 떨어져 위치하게 됨left: 왼쪽면으로부터 #만큼 떨어져 위치하게 됨right: 오른쪽면으로부터 #만큼 떨어져 위치하게 됨 position 속성값 position속성에는 아래 표에 나와 있는 속성값들을 지정할 수 있다 속성값정의staticposition을 별도로 지정하지 않을 시에 갖는 기본값relativestatic과 일반적인 흐름을 따라 배치되나, static위치에서 top,bottom,left,right와 같은 속성에 의한 상대적인 위치에서 배치본인 위치를 기준absolute일반적인..

[7일차 1교시~3교시 ]  [웹디자인 참고 사이트] / 폰트크기, 레이어 구성방법 미리미리 공부해두기  [디비컷]https://www.dbcut.com/websites?page=2 디비컷 - 웹디자인 평가 및 우수 웹사이트 모음국내외 우수 웹디자인 레퍼런스 사이트www.dbcut.com [지디웹]https://www.gdweb.co.kr/main/ http://www.gdweb.co.kr www.gdweb.co.kr 배너이미지 [언스플래쉬]https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.unsplash.com필요한 이미지 클..

[6일차 1교시 ~ 3교시] ✅디자인삼성 탑바 구현하기 2차 /추가 PLUS 개념💨 💨 F12 누르면 개발자모드로 코드를 볼수 있음 💨 💨 개발자 모드에서 이미지 엘리먼트를 찾고이미지화면으로 이동 후에 컨트롤 + u -> 코드를 볼수있음  ->VSCODE에서 폴더 경로가 달라지면 밑줄 친 부분처럼 파일명에 줄이 가있음추후에 바뀐 파일>파일경로를 올바르게 다시 설정해줘야 함 (코드도)

[5일차 1~3교시] 삼성디자인 top-bar 구현하기  1.큰 틀을 잡기 먼저 코드 짤 큰 박스 먼저 차근차근 정리해두기 ( 💨💨이미지 export 후 그림판으로 틀 짜보기) 2.html 하나씩 작성하기(html에 link- style.css 걸어두고 잘 연결되었나 확인하기)-> 먼저 top-bar-section에 background-color를 설정해보기 top-bar-section -> container -> left-box+right-box -> left-box(logo/nav)->right-box(text/icon) 3.html에서 큰 틀을 잡아두었다면 css로 가서하나씩 코드 생성해보기  ✅svg 파일 연결하는 방법 1. 페이지 소스 찾기 원하는 ..

[4일차 1교시] 리스트 태그 (ul, li) - 목록과 리스트태그 - ul>liul- 목록의 역할- ul태그 안에는 li태그만 사용가능함✅제목은 제목태그(h태그)를 추가적으로 작성해줘야 한다✅큰 구조에 ul,li를 활용하는 것은 코딩할 때 헷갈릴 수 있다(div로 짜고 ul,li를 활용하는 것이 좋다)✅ul,li태그는 독단적으로 사용할 수 없다li-리스트 역할-li태그 안에는 모든 태그를 사용할 수 있다.  -이미지 예시     활용예시1.네비바네비게이션바(목록) - 메뉴 리스트 1(리스트) - 메뉴 리스트 2(리스트) - 메뉴 리스트 3(리스트)2.아이콘아이콘박스(목록) - 아이콘 리스트 1(리스트) - 아이콘 리스트 2(리스트) - ..

[3일차 1교시 ~ 3교시] 비쥬얼스튜디오로  마켓컬리 구현하기  폰트 링크 가져오기  1. 어썸폰트 검색  2.  free 카테코리 선택 (위 이미지의 옐로우 박스)  3. html에 코드 카피하기 ( 해당 코드를 마우스로 클릭하면 카피됨)->추후  vscode html에 link+tap 후에 붙여넣기 하면 됨 4. html에 붙여넣기를 했다면 어썸폰트와 css가 연결되게 해야 함-> 인터넷 검색창에 cdnjs 검색 후 font 검색 -> 화면과 같이 font-awesome 옐로우 박스 클릭후html에 링크 붙여넣기

[2일차 1교시] ✅flex-direction정렬 복습 flex-direction : 배치 정렬 row 한 줄에 같이 배치 inline-block같은 것 justify-content: 가로정렬 align-items: 세로정렬 column 한 줄에 하나씩 배치 block같은 것 justify-content: 세로정렬 align-items: 가로정렬 ‼ reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀜 ✅flex-wrap nowrap 모든 요소들을 한 줄에 정렬 wrap 요소들을 여러 줄에 걸쳐서 정렬 wrap-reverse 요소들을 여러 줄에 걸쳐 반대로 정렬 align-content가 space-around나 space-between일 경우에 사용 가능 ✅flex-grow ✅ flex..

[1단계] - justify-content 목적 : flex-item인 개구리를 상단 오른쪽으로 위치시키기 문제 : 개구리가 오른쪽에 위치해야 하는데 상단 왼쪽에 위치해 있음 이유 : flex-item justify-content기본값이 flex-start로 되어 있다 해결 : justify-content: flex-start;를 justify-content: flex-end;로 변경해주면 된다 [2단계] - justify-content 목적 : flex-item인 개구리를 상단 가운데로 위치시키기 문제 : 개구리가 중앙 위치해야 하는데 상단 왼쪽에 위치해 있음 이유 : flex-item justify-content기본값이 flex-start로 되어 있다 해결 : justify-content: flex-..