Jieunny의 블로그

📣 계산기 목업 ✔️ flex 이용하기 ✔️ 레이아웃 신경쓰면서 깔끔하게 📣 와이어프레임 ✏️ 의문점.. ✔️ 버튼 맨 마지막줄에서 '0' 에 flex: 2 줬는데 왜 윗줄이랑 미세하게 다른지? 뭐가 잘못되서 미세하게 차이가 나는지 모르겠다. 0.2px 차이,,(해결!) 버튼요소에 flex: 1 이렇게 주지 말고 flex: 1 0 auto 이렇게 주면 basis가 컨텐츠 크기만큼 되서 계산기가 들쑥날쑥 해지는데 이때 max-width를 설정해 주면(비율을 설정해야하므로 %값으로 준다.) 버튼 요소가 그 크기는 못넘기 때문에 원하는 크기로 설정 가능하다. ✔️ flex 속성을 이렇게 남발해도 되는지? ➰ 그냥 혼자 미리 해본거라 페어 활동 때 페어님이랑 의논 해봐야지..

📣 Flexbox 사용해서 VScode 레이아웃 만들어보기 icon1 icon2 icon3 box1 box2 box3 box1 box2 html { height: 100%; /* 박스들을 화면에 꽉 채우기 위해서 부모요소 높이 주기 */ } body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; height: 100%; /* 박스들을 화면에 꽉 채우기 위해서 부모요소 높이 주기 */ } .container { width: 100%; /* 화면에 가로 꽉 채우기 */ height: 100%; /* 화면에 새로 꽉 채우기 */ display: flex; /* 자식 요소인 3개의 div를 가로로 배치하기 위해 부모요소에 flex 주기 */ } .col..

📣 와이어 프레임 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계 단순한 선이나 도형으로 단순한 구조만 보여주기 화연의 영역을 구분하는 일 ➰ 각 영역에서 사용할 주요 태그 적기 📣 목업 (Mock-up) 실제 작품이 작동하는 모습과 동일하게 HTML을 작성 하드코딩하는 방식 ➰ 변수를 하나하나 입력해주는 방법 📣 HTML 구성하기 ✔️ 수직분할 & 수평분할 1. 수직분할 : 화면을 수직으로 구분해서 콘텐츠가 '가로'로 배치되게 한다. 2. 수평분할 : 분할된 각각의 요소를 구형으로 구분해서 내부 콘텐츠가 '세로'로 배치되게 한다. 1, 2를 차례로 진행한다. ✔️ 레이아웃 리셋 HTML 태그들이 기본적으로 가지고 있는 스타일을 초기화 해주는 것 * { box-sizing : border-box;..

➰ 2일차 그래도 대학에서 배웠다고 아직까지 그렇게 어려운 건 없다... 4년 갖다버린건 아닌 거 같아서 다행🥹 오늘 진도는 타입과 변수 까지었는데 그냥 되는대로 쭉쭉 하다보니 CSS까지 하고있다. 선행 어디까지 나가도 되는건지 모르겠지만 종합퀴즈랑 코플릿만 놔두고 시간 나는대로 공부 해야겠다. HTML이랑 CSS도 독학으로 어느정도 했던거라 강의 콘텐츠 따라가는 게 어렵지는 않다. 복기하는 느낌으로 공부하고 블로그에 차근차근 정리 중이다! 오늘 첫 페어 활동 때문에 아침부터 긴장해서 손에 땀나고 심장 터질 거 같았는데 나름 잘 해낸 것 같아서 맘이 한결 편해졌다. 지금 페어님과 적응 될 때쯤 페어가 바뀌겠지...😱 페어님이 나랑 비슷한 성향이시고 친절하셔서 생각보다 편하게 페어활동 한 것 같아 감사했다..

📣 CSS ✔️ CSS 란? 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 ✔️ UI & UX 란? UI (사용자 인터페이스) : 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스 UX (사용자 경험) 직관적이고 쉬운 UI 에서 좋은 UX 나온다. ✔️ CSS 문법 구성 셀렉터, 선언 블록, 선언, 속성명, 속성값, 선언 구분자 body { color: red; font-size: 30px; } ✔️ CSS 파일 추가 1. 외부 스타일 시트 html 파일 안에 태그 안에서 href 속성을 통해 html, css 파일을 연결 rel : 연결하고자 하는 파일의 역할이나 특징 href : 파일의 html과의 상대적인 위치 (절대 경로도 가능) 2. 내부 스타일 시트 css 내용을 별도 ..

📣 웹 개발 구성 요소 HTML : 구조 CSS : 스타일 JS : 상호작용 📣 HTML 기본 구성 ✔️ 웹페이지의 틀을 만드는 마크업 언어 ✔️ HTML은 태그들의 집합 ✔️ : 이 문서가 html 임을 명시 ✔️ : html 시작태그 ✔️ Hello 📣 HTML 태그 : opening태그와 closing태그로 구성 ✔️ 태그 한 줄을 차지 ✔️ 태그 컨텐츠 크기만큼 공간을 차지 ✔️ 태그 이미지 삽입 태그 ✔️ 태그 링크 삽입 target 지정해주면 새 탭에서 링크가 열린다. 링크 ✔️ 태그 리스트 태그 순서가 있는 리스트는 사용 first second third ✔️ 태그 checked unchecked a b ✔️ 태그 줄바꿈 가능 📣 HTML 속성(attribute) attribute name ..