코딩 일지

기본세팅

목차 - props - - 기본 세팅 props Props는 컴포넌트의 속성값이다. 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다. 예시 코드 html 엘리먼트

목차 - 리액트란? - 라이브러리, 프레임워크 차이 - 리액트 특징 - 컴포넌트(Component)란? - 리액트 환경 기본 세팅 - 리액트 React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 라이브러리와 프레임 워크의 차이 라이브러리: 폴더 구조가 없는 모듈 프레임워크: 폴더 구조가 있는 모듈 React의 특징 1. Data Flow 2. Component 기반 구조 3. Virtual Dom 4. Props and State 5. JSX 이번 글에서는 Component에 대해서만 가볍게 알아볼 것이다. Component란? Component는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 ..

목차 -form - (post와 get차이) -URL과 URI -display:flex -padding, margin을 어디에다 주어야 정렬이 될까? 1. 로 글 올리는 게시판 만들기. 게시판 로고 /*메인 홈페이지로 바로가는 링크, 여기에선 자기자신에게 이동*/ /*선의 표시를 위해 넣어둠*/ 번호 제목 작성자 작성일 조회수 1 ㅎㅇ /*제목을 눌렀을 때 그 글로 이동*/ 김밥 21-12-29 3 2 안녕하셈 떡볶이 21-12-29 1 글쓰기 /*누르면 메인페이지로 주소 이동하는 버튼. 귀찮아서 앵커태그로 함.*/ 출력 결과 2. 제목을 눌렀을 때 view.html라는 아래 코딩한 파일로 이동하게 할것임. 그전에, 링크를 누른다는건 (제목을 누르면) 사이트의 주소가 변한다는 것이다. 즉, html이 변..

목차 - 팝업창 만들기 - 블럭 위치 지정하기 (transform:translate) - 그림자 생성하기(box-shadow) - 여러 개의 선택자의 스타일을 동시 적용하기 - 절대 지정(다른 스타일 다무시: important) - 특정 스타일 여러번 재사용하기 - 커서 클릭했을 때 스타일 적용(focus) - 브라우저 별 스타일 다루게 적용하는 접두어 - border와 outline 차이 특정 버튼을 눌렀을 때 팝업창이 나오도록 만들기 원리는 label을 두 개 만들고 하나의 라벨에 100%*100% 뒷배경을 꽉채워 배경을 지정하는 것이다. 1. input으로 체크박스를 넣는다. 버튼 label을 하위 엘리먼트로 넣느냐 동등한 엘리먼트로 넣느냐 고민 했지만, 출력값에 변화가 없는 걸로봐서 input 박..

목차 -label for(라벨의 역할), 체크박스 -선택자 -중복 id 중에 원하는 것만 선택하고 싶을 때. -속성 선택자 -display:none; -input박스 너비조정 가능한 이유 -display: none; 를 checked에만 적용하면? -인접 접근자 -nth-child(숫자) -transition: 0.35s -메뉴 숨기기/ 보이기 (애니메이션 효과 주기) -라벨 클릭하면 바뀌는 원리 -transform: translateY(-50%); -position: fixed; -clear: both; -연습하는 법 라벨의 역할 label for="" 웹 접근성 ↑ (글자 클릭해도 눌림.) input type="text" : 인풋박스 웹접근성 늘리려면? 체크박스(온오프 스위치)도 인풋박스와 동일하다...

목차 -자간설정 -p태그 -블럭 둥글게 만들기 -텍스트 위아래 정렬 -백그라운드 이미지 추가하기 -백그라운드에 추가한 이미지 이동시키기 -border 로 블록 테두리에 선 그리기 -hover line-height: 30px; 오늘의 주의사항 1. html 영역 스케치 먼저하는 게 편함. 2. 로고는 사용 3. ul, li 모두 블럭 속성 4. float:left; 는 inline효과도 주지만, 기본적으로 아래에 있는 애들(자손 엘리먼트가 블럭이어도 ex) )이 블럭이어도 옆으로 붙는 효과 5.바로 위 엘리먼트도 같이 레프트를 적용하면, 같이 인라인속성 취급되기 때문에 옆으로 바로 붙게됨 6. 블럭으로 바꿨으면 너비 지정하기(블럭은 한 줄을 다 차지하는 성질이기때문에 반드시 너비를 지정해주어야한다) 7.웹..

1. text-align: center 정렬대상이 inline 요소일 때 사용하는 방식이다. 정렬할 때 부모 block 요소를 가진 부분에 적용을 하면된다. inline 요소에 text-align: center를 했을 때 적용되지 않냐면 inline 요소는 content의 넓이만큼(글자크기, 글자수)만 공간을 차지하기때문이다. text-align: center 를 적용시켜도 이미 딱 그 요소의 넓이만큼만 공간을 차지하고 있으니 움직일 공간이 없다. 그래서 부모 block 요소에 적용을 해야한다. block 요소는 기본적으로 한줄을 다 차지하기 때문이다. 그러면 그 요소에 속한 inline 요소들이 정렬된다. 2. margin: 0 auto 이 정렬방법은 정렬대상이 block 요소일 때 사용하는 방식이다...