JiYoung Dev 🖥

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 포지션 가장 가까운 포지셔닝이..

어제 CSS 핵심 강의를 다 듣고 오늘 내가 만든 웹페이지에 스타일을 입혀보았다. 카카오오븐으로 만든 스토리보드 디자인을 기본으로 했으나, 폰트 크기나 여백 등은 임의로 css로 직접 코딩을 해보면서 적당하게 조절하였다. 🔎 css 코드 작성 결과 간단한 웹페이지라서 동일한 디자인의 구조가 많아 작성이 어렵지 않았다. 작성하면서 모르는 부분은 구글링을 통해 해결하였고, 그 내용은 아래와 같다. 📖 Div 태그 중앙에 정렬하기 Div 태그에 Width를 설정하고 margin 오른쪽, 왼쪽 값을 auto로 설정 ▼ html 코드 ▼ ▼ CSS 코드 ▼ 📖 한 줄 문장 양쪽 정렬하기 한 줄짜리 문장을 양쪽 정렬하고 싶어 text-align: justify를 적용했지만 적용되지 않았음. 여러 줄일 경우에는 정렬..

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) 화면에서 그려지는 가장 작은 정사각형을 말하여, ..