코딩 일지

목차 -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 요소일 때 사용하는 방식이다...

목차 -반드시 알아야할 사실 -width, height -인라인->블럭속성으로 변경 -가운데 정렬하기 -링크 # -리스트 동그라미 없애기 -margin과 padding 초기값 설정 -float -엘리먼트 붙여서 출력 -로고 이미지 업로드 및 링크 연결 -하이퍼링크 언더 라인 지우기 -가운데정렬, 글자 굵게 -postion:absolute vs position:relative -z-index -투명도 설정 오늘의 목표 : 홈페이지 이미지 위에 div 태그 올리기(겹치기) 만들기 전에 알고 들어갈 사실! 1. 는 블럭속성을 갖고 있다. 그렇기 때문에 여기에 너비 높이 설정해서 블럭이 작아져도, 한 블럭 다 차지하는건 변함없다. 2. 안에 새로운 div 태그를 넣을 시(가둘 시) 이 div는 부모 div 안에..

목차 -파일명 정하는 법 -html 단축키 -html로 테이블 생성하기 -css 사용 이유? -css기본문법(html과 다른점) -선택자 -스타일 주는 3가지 방법 1. 인라인 스타일 2. style 엘리먼트 사용 3. 외부파일 생성 -파일의 절대경로, 상세경로 -margin, padding 파일명 정하는 법 1. 확장자는 늘 .html 2. 영어사용 3. 특수문자/띄어쓰기 없는편이 좋음 4. 예외 특수문자 - _ (.) html 페이지 전체 나오는 단축키 두개 1. ! 2. html : 5 HTML로 테이블 만들기. 엘러먼트를 사용한다. 줄 생성 : 칸 생성 : 응용 : 3줄(가로), 4칸(세로) 3*4 border="1" 사이 선 표현, 현재는 잘 사용 안함. 1 2 3 4 5 6 7 8 9 10 1..

랜더링? 우리가 흔히 인터넷 서핑을 할 때 http:// ~~ 로 시작하는 주소를 입력해 네트워크 연결이 이루어진다. 주소 창 아래 보이는 시각적 자료 영역은 전부 렌더링을 한 것이다. 이 때 랜더링을 할 수 있는 3가지 언어는 HTML, CSS, Java Script가 있다. 즉, 랜더링의 역할 3가지는 1. html 해석 2. css 해석 3. 자바 스크립트 해석 이라고 볼 수 있다. 랜더링 기법은 각 브라우저마다 상이하다. 랜더링된 영역에서 HTML을 알려면? 크롬 환경에서 키보드에 있는 f12를 눌렀을 때 개발자도구가 나오는데 파란색 영역을 클릭하고 알고싶은 랜더링 영역을 선택해서 html을 확인 할 수 있다. 단축키는 ctrl + Shift + c Visual Studio Code html에 대..