문미새 개발일지

리액트에서 CSS를 적용하는 방식에는 여러 가지가 있으며, 각 방식들은 프로젝트의 필요에 따라 선택할 수 있고 스타일을 관리하는 방식에 따라 다를 수 있다. 주요 방식기본 CSS 파일 사용리액트에서 가장 기본적인 방법은 일반적인 HTML과 마찬가지로 외부 CSS 파일을 사용하는 것이다. 이 방법은 모든 컴포넌트에서 동일한 CSS 파일을 공유할 수 있다.// App.jsimport React from "react";import "./App.css"; // CSS 파일을 임포트function App() { return ( Hello, React! );}export default App;==================/* App.css */.App { text-align: cen..

저번글에서 전체적인 홈페이지의 div구조와 이벤트 구상을 하였습니다 구상한 이미지를 보며 조원들과 홈페이지 제작을 완료했습니다 구상한 이미지에서 애매하거나 좀 부족한 부분은 빼고 구현했습니다. 원래 개인페이지도 각자 맡아 링크를 붙이려 했었는데 프로젝트 기간이 생각보다 짧은관계로 메인홈페이지에 다 쏟아부었습니다.. 구현한 이벤트의 이미지입니다 프로젝트 시간만 넉넉하게 잡았으면 마음같아서는 부족한 이벤트랑 개인페이지까지 같이 구현을 하고싶었는데 다음에 배우는 리액트가 제일 중요한 파트여서 js를 이용한 2차 홈페이지는 여기까지 만들기로 했습니다 다음은 리액트에 대한 공부와 프로젝트에 대해 작성하겠습니다

주에 두번이라 7일차인데 벌써 4주차네요 시간도 너무 빨리 가는거 같아 마음만 급해집니다. 박스사이징(box-sizing) 박스사이징은 박스의 크기를 어떤 기준으로 계산할지 정하는 속성으로 높이(height)와 길이(width)를 부여합니다. 이 높이와 길이에는 패딩(padding)이나 보더(border)영역은 포함하지 않습니다. box-sizing:content-box - 기존의 계산법이며, width와 height를 포함하지 않는 박스사이징입니다. box-sizing:border-box: - width와 height에 padding, border를 포함하는 박스사이징입니다. 만약 길이(width)가 100%로 설정된 경우, padding이나 border속성을 추가할 수 없기 때..

6일차입니다. 벌써 강의 들은지 3주가 지났습니다. ㄷㄷ 이제 막 배워가는 단계여서 다른 언어와 명령어가 겹쳐 헷갈리기도 하더라구요. 정확히 이해하고 사용해야 할 것 같습니다 background-color HTML 요소의 배경색 설정 ex) background-color: royalblue; background-image HTML 요소의 배경으로 나타난 배경 이미지를 선택 배경 이미지는 기본 설정으로 바둑판 형식으로 반복되어 나타남 ex) background-image: url(./img/건물들.jpg); background-repeat 배경이미지를 수평이나 수직방향으로 반복하도록 설정 (repeat, repeat-x, repeat-y, no-repeat(반복안함))..

5일차는 4일차 마지막의 속성선택자부터 시작합니다. 속성 선택자는 태그 안에서 사용되는 속성들의 값에 따라 스타일을 지정할 수 있습니다. 1. [속성명 = "속성값"] -> 속성값이 완벽히 일치한 경우 2. [속성명 ~= "속성값"] -> 값이 속성값과 다른 값이 띄어쓰기로 있는 경우 3. [속성명 *= "속성값"] -> 속성값이 포함된 문자를 가지고 있는 요소 4. [속성명 $= "속성값"] -> 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택 5. [속성명 |= "속성값"] -> 속성값이 완벽히 일치하거나, 접두사로 존재하는 -으로 연결된 문자를 가지고 있는 요소를 선택 ex) | = 값이 "apple"이거나 혹은 "apple-tree"인 것을 선택 6. [속성명 $..

넷째 날은 홈페이지의 디자인을 꾸밀 수 있는 CSS에 대해 공부했습니다 그전에 HTML의 태그 하나를 알아보겠습니다. 시맨틱 웹 태그란? - 전 세계에 만들어져 있는 수많은 웹 문서 갯수가 늘어나면서 정확하고 가치있는 정보탐색을 위해 요구하는 사람들이 점점 늘어나기 시작하며, - 웹 세상에서 방대하게 퍼져있는 웹 문서를 보다 쉽고 정확하게 구분하고 조합하기 위한 시맨틱 웹 태그를 사용하게 되었다. (1) 웹 접근성 - 장애를 가진 사람과 장애를 가진 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리키는 것 (2) 검색 엔진 - 검색엔진의 자체 알고리즘이 키워드를 추출하는데, 이 때 해당 알고리즘이 시맨틱 태그를 읽어 더욱 정확한 내용을 전달해 검색엔진 상위문서..