실습 30일 차

구성본·2022년 8월 9일
post-thumbnail

1. 학습한 내용

  • 이제까지 배웠던 학습 과정들을 정리하면서 새롭게 보던 중 다시 보니 '아!'라며 이해가 되는 부분들이 생각보다 많이 생겼다
  • 4월에 했던 학습 과정들은 AI관련된 기초적 학습들이었기 때문에 velog로만 자료들이 남이있어서 그걸로 다시 한 번 볼 수 있었다
  • 5월부터 학습했던 html, css, js의 기초적인 부분들을 다시 보면서 새롭게 이해가 된 부분들을 정리해보려고 한다

1. 5월 학습한 내용

1. form
[폼 태그 속성]
name: 스크립트나 서버에서 폼을 식별하기 위해 사용하는 폼 이름
action: 폼 데이터를 전송할 URL 지정
method: HTTP 요청 메소드(get, post)
    -get: 데이터를 URL의 일부로 전송
    -post: 데이터를 본문으로 송신
target: 웹 서버 응용프로그램으로부터 전송받은 데이터(HTML문서나 이미지)를 출력할 윈도 이름
  = 공백 
<input> <button> 왜 같이 쓰나? 
        1) <button>은 자식태그를 가질 수 있다
        2) <button>은 CSS에서 가상선택자로 꾸며줄 수 있다
        => input의 한계를 넘어 다양한 표현이 가능하다
table 작성의 기본적인 태크 : table, th, tr, td
<table> : 표를 만들 때 사용
<th> : 테이블 각 열의 제목, 두꺼운 글자로 셀 중앙에 배치
<tr> : 행
<td> : 열, 열 제목을 제외하고 각각의 셀을 표현할 때 사용

colspan =행 합치기, rowspan=열합치기 셀이 합쳐진다 => th, td

표 구조 정의 caption, thead, tbody, tfoot
2. CSS
white-space
normal : 여러 개 공백을 하나로 표시.
nowrap : 여러 개 공백을 하나로 표시. 영역 너비를 넘어가는 내용은 줄 바꾸지 않고 계속 한 줄 표시
pre : 여러개 공백을 그대로 표시. 영역 너비를 넘어가는 내용은 줄 바꾸지 않고 계속 한 줄 표시
pre-line : 여러개 공백을 하나로 표시. 영역 너비를 넘어가는 내용은 자동 줄 바꿈
pre-wrap : 여러개 공백을 그대로 표시. 영역 너비를 넘어가는 내용은 자동 줄 바꿈
border-box => border까지 적용
padding-box => border빼고 padding까지 적용 
content-box => 내용 부분에만 적용 

<position>
-normal flow : 브라우저가 웹 페이지에 나타난 순서대로 태그 배치
-position : normal flow를 무시하고 원하는 위치에 박스 배치
-<div> : 공간을 묶어주는 역할로 많이 사용
    -header, section 등 시멘틱태그들을 대신 쓴다 (큰 영역을 나눌 때)
    -div = 작은 영역들을 묶어줄 때 많이 사용
    -static : 요소를 문서의 흐름에 맞추어 배치
    -relative : 이전 요소에 자연스럽게 연결해 배치하되 위치 지정 가능
    -absolute : 원하는 위치를 지정해 배치
    -fixed : 지정한 위치에 고정해 배치(화면에서 요소가 잘릴 수 있음)
                            static  relative  absolute  fixed
    -부모 자식 간 마진병합       o        o         x        x
    -top,right,left,bottom     x    o(원위치)      o        o
    -자식의 높이 부모의 높이     o        o         x        x
                              2차원     혼합    3차원     3차원
                              (height:X)
z-index : z축의 높이를 조정한다
        (기본) z-index : 0 
        (큰 수) 위로 ,(작은수) 아래로 
        3차원 position : absolute, fixed, relative

2. 학습한 내용 중 어려웠던 점

  • 이전에 이해되지 않던 부분들이 다시 봤을 때 이해할 수 있었다
  • 5~6월까지 진행한 학습들 전반을 둘러보았는데 많은 도움이 된 것 같다
  • 함수 부분은 아직 좀 더 학습이 필요한 부분이다

3. 해결방법

  • jQuery, React 부분을 새롭게 보면서 더 공부해봐야겠다

4. 학습소감

profile
코딩공부중

0개의 댓글