JiYoung Dev 🖥

🎈 어제 배운 내용 정리 Box Model - Content : 내용 - Padding : 안쪽 여백 - Border : 경계선 - Margin : 바깥 여백 Box-Sizing 1. content-box (default) : content 만큼만을 크기로 삼는 2. border-box : border까지를 크기로 삼는 => 나는 패딩값은 주고 싶지만, 전체적인 크기에는 영향을 주고 싶지 않을 때 사용! border-box Border-Radius - 테두리를 둥글게 만들어주는 속성 border-위/아래-좌/우-radius Flex Box - Container와 Item 을 나누는 작업이 먼저 - Item : 내가 움직이고자 하는 요소 - Container : 아이템의 부모요소 a. container에 ..

🎈 박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부름 → 박스는 공간 효율성이 좋기 때문 요소의 부피감을 결정하는 개념 박스모델은 HTML 요소를 패딩(padding), 마진(margin), 그리고 내용(content)으로 구분 1. 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 2. 패딩(padding) 내용과 테두리 사이의 간격 (눈에 보이지 않음) 3. 테두리(border) 내용과 패딩 주변을 감싸는 테두리 4. 마진(margin) 테두리와 이웃하는 요소 사이의 간격 (눈에 보이지 않음) 🎈 마진(margin) 테두리를 기준으로 요소의 바깥 여백 지정 background-color 속성으..

코드 작성시 주석 작성을 통해 다른 사람이 코드를 보아도 이해하기 쉽도록 할 것! 🎈 CSS 📖 CSS(Cascading Style Sheets)란? HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어 (프로그래밍 언어X, 마크업 언어X, 스타일 시트 언어O) Cascading(캐스케이딩)은 폭포, 위에서 아래로 쏟아지는 뜻을 가진 단어로 같은 요소에 여러 개의 스타일이 중복되었을 때 스타일 우선순위와 상속을 통해 어떤 스타일을 적용할지 결정한다는 의미 📖 왜 CSS를 따로 만들었을까? HTML만으로 웹페이지를 제작하는 경우 HTML 요소의 세부 스타일을 일일이 지정해야 함. 이 작업은 매우 많은 시간이 걸리며, 완성한후에도 스타일의 변경 및 유지 보수가 어려움. → 정보 표현(HTML)과 디자인..

🎈 리스트 태그 📖 unordered list 번호 없는 목록을 선언할 때 사용하는 태그 📖 ordered list 번호 있는 목록을 선언할 때 사용하는 태그 📖 list item , 태그 안에서 콘텐츠를 담기 위해 공통적으로 사용되는 태그 리스트 태그 딸기 바나나 사과 JAVA DB 실습! 구매 목록 딸기 소고기 샤브샤브 샤브샤브 순서 육수와 소스를 넣는다 재료들을 넣는다 고기를 넣는다 🎈 이미지 태그 웹페이지에 이미지를 보여주는 태그 필수 속성 → src : 이미지의 경로를 지정 ⚙️ 경로를 알려주는 방법 1. 절대 경로 어떤 페이지나 파일이 가진 고유한 경로 외부 웹페이지로 연결할 때 사용 내가 파일을 어디에서 사용하고 있던 절대경로는 수정할 필요가 없음 그러나 원본이 사라지게 되면 함께 사라짐 2..

🎈인터넷(Internet) 여러 통신망을 하나로 연결한다는 의미인 '인터 네트워크(inter-network)'의 말에서 시작 전 세계 컴퓨터를 하나로 연결하는 거대한 컴퓨터 통신망 https://www.huffingtonpost.kr/news/articleView.html?idxno=29681 해저케이블과 인터넷 스마트폰 세상에서 모든 정보가 무선으로 오가는 걸로 보이지만, 실제론 광케이블이 담당한다. 국내에서 인터넷은 연구망인 하나망이 위성통신으로 하와이대학에 연결된 게 시작이지만, 1991년 www.huffingtonpost.kr 인터넷은 클라이언트와 서버로 구성되며, TCP/IP라는 기본 프로토콜을 통해 제공됨 🎈웹(WEB) 월드 와이드 웹(World Wide Web) = WWW = W3 = 웹(W..

2023.03.07~2023.03.08 코드잇 학습내용 🔎 Position 속성 글의 흐름에서 벗어나 요소를 자유롭게 배치할 때 쓰는 속성 기본값은 static이고, static인 경우 원래 있어야 할 위치에 배치됨 📖 위치 정하기 top, right, bottom, left 속성으로 위치를 정할 수 있음 위의 4개의 값이 모두 같은 경우 inset 속성 사용 📖 relative 포지션 요소의 원래 위치를 기준으로 배치함. 이때 요소의 원래 자리는 그대로 차지하고 있음. .blue { background-color: blue; width: 200px; height: 50px; position: relative; top: 15px; left: 10px; } 📖 absolute 포지션 가장 가까운 포지셔닝이..

2023.03.06 코드잇 학습 내용 🔎 HTML (Hypertext Markup Language) - Hypertext(하이퍼텍스트) : 서로 링크로 연결된 문서 - Markup Language(마크업 랭귀지) : 마크업 하는 프로그래밍 언어 → mark something up : 표시하다 ▶ 내용에 추가적인 정보를 표시하는 프로그래밍 언어 - 즉, 링크로 연결된 문서를 만들 때 사용하는, 내용뿐만 아니라 문서의 구조와 의미(h1, p, button 등)와 같은 추가적인 정보까지 표시하는 프로그래밍 언어 📖 HTML의 기본 문법 ... 내용 html은 태그로 작성 태그는 기호로 감싸져 있음 시작태그, 종료태그 시작..

2023.03.01 ~ 2023.03.03 코드잇 학습내용 🔎 CSS 규칙 HTML태그에 스타일 속성을 추가하여 스타일을 입힐 수 있었음. 그러나 이 방법은 동일한 속성을 주고 싶은 태그가 여러 개일 때 스타일을 입히는 게 번거로워짐. 따라서 관심사의 분리(seperation of concerns)를 진행함. 즉, 내용과 스타일을 분리하는 것. 관심사를 분리하면 내용과 스타일을 따로 고치기 편하고, CSS 파일을 따로 저장하기 편함. 따라서 CSS 속성을 하나하나 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용하는 것을 권장함 기본 문법: 선택자 { 속성: 속성값; 속성: 속성값; } 작성 예: h3 { color: #ffffff; font-size: 20px } 🔎 CSS 선택자 규칙에서 요소를 선택하..

2023.02.28 코드잇 강의 내용 🔎 style 속성 태그에 CSS를 적용하려면 style이라는 속성을 사용 CSS 코드를 추가할 때는 CSS 속성: CSS 속성값 형태로 작성 여러 개의 CSS 속성을 사용할 때는 세미콜론(;)으로 구분 🔎 CSS 기본 단위 📖 색이름 red, green, yellow처럼 색상을 이름으로 사용하는 방식 → 다양한 색을 표현하는데 한계가 있기 때문에 거의 사용하지 않음 📖 색상 코드 색상을 HEX(16진수)로 표현한 값. 보통 이 값으로 색상을 사용. 모든 색깔들을 펼쳐 놓고 하나씩 코드를 부여한 것으로 구글에서 'color picker' 등을 검색하여 색상 코드를 확인할 수 있음 📖 픽셀(Picture element) 화면에서 그려지는 가장 작은 정사각형을 말하여, ..

🔎 HTML, CSS란? HTML, CSS는 웹사이트를 만드는 프로그래밍 언어(컴퓨터 프로그램을 만들 때 사용하는 언어) 소스 코드 : 프로그래밍 언어로 작성한 내용 코딩 한다 : 프로그래밍 언어로 코드를 작성한다. HTML은 웹사이트에 들어가는 내용을 담당하고, CSS(Cascading Style Sheets)는 웹사이트에 들어갈 스타일을 담당 웹사이트를 만들 때는 기본적으로 .html 형식의 파일을 만듦. HTML 파일을 편집한 다음에 웹 브라우저에서 열면 우리가 평소에 보는 웹사이트처럼 화면에서 볼 수 있음. HTML 파일을 작성하기 위해 VS Code를 사용하고, 웹 브라우저로는 크롬을 사용하여 웹사이트를 만들어 볼 예정. 🔎 HTML 파일 만들고 실행해보기 📖 태그(Tag) HTML에서 태그는 ..