html5 엘리스 SW 3기 1차 프로젝트 - 3~14일차 정신없이 코드만 치느라 미루고 미뤄뒀던 회고록,,,, sessionStorage는 저장소라고 하니 괜히 막막했는데 알고 보니 껌인 애였다. 뭐든 처음 보는 것에 긴장하는 습관을 버려야겠다. 막판에 메인 페이지에는 localStorage를 활용한 코너도 넣었다. daum 주소 검색 기능을 회원가입 폼에 붙여보았다. 외부 기술을 가져다 쓰는 거라 어떨지 겁이 났는데 내부에서 기능 구현을 하는 것보다 훨~씬 간편했다. 카카오페이 결제 기능도 넣어봤으면 하는 아쉬움이 남았다. 장바구니 함수를 짜는데 계속 거르지 못하는 부분이 있고, 에러가 발생하는 곳이 있어 js 파일을 여러 번 갈아엎었다. 이렇게 복잡하게 엮인 페이지를 구현하기 전에 조직도 혹은 구상도를 미리 짜 보고 구현하는 것이 좋겠다. 할인 코너에 카운.. 2022. 11. 14. [css] flexbox flexbox는 뷰포트의 요소나 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식이다. flexbox를 1차원이라 칭하는 것은 레이아웃을 다룰 때 하나의 차원(행이나 열)만을 다루기 때문이다, 이는 행과 열을 함께 조절하는 grid와 대조되는 점이다. flex 속성을 사용할 때에는 내가 자유롭게 배치하고 싶은 항목들을 감싸고 있는 컨테이너를 flex로 지정한다. flex로 지정된 컨테이너의 일차 자식이 flex 항목이 된다. 👉여기서부터는 flexbox 속성 1) flex-direction: 주축(main-axis)를 결정한다. row: 열의 정방향 row-reverse: 열의 역방향 column: 행의 정방향 column-reverse:.. 2022. 9. 18. [html] 기본 태그 2 많이 쓰이는 32개의 태그 중 나머지. § div 태그 division의 약자. block 요소로 레이아웃을 나눌 때 주로 사용한다. class나 id 값을 붙여 css와 함께 사용. § span 태그 div처럼 레이아웃을 나누는 태그로 css와 함께 사용한다. div와의 차이는 inline 요소라는 점. § script 태그 코드 삽입을 위한 태그. 따로 파일을 만들지 않고 코드를 참조하기 위해 사용한다. 보통 javascript 코드를 넣는 것으로 사용. body의 가장 아래에 넣어 쓰며, 파일을 분리할 때는 다음과 같이 작성하여 연결해 준다. § style 태그 css 설정을 같은 웹페이지 안에서 정의할 때 사용. style 태그로 css를 입력하는 방식을 인터널 방식이라고 한다. head 태그 안.. 2022. 9. 14. [javascript] inner/outerHTML, textContent 비교 1. element.innerHTML 요소 노드 내부의 html 코드를 문자열로 리턴해 준다, 내부에 있는 행갈이나 들여쓰기 모두 포함하여. > 요소 안의 정보를 확인할 수도 있지만 내부의 html 자체를 수정할 때 자주 활용된다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용!) 2. element.outerHTML 요소 노드 자체의 전체적인 html 코드를 리턴해 준다. inner와 마찬가지로 행갈이, 들여쓰기 모두 포함이다. (새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의!) 3. element.textContent 요소 내부 내용들 중 html 태그를 제외한 테스트만 출력. 마찬가지로 행갈이, 들여쓰기 포함. > innerHTML처럼 노드 내부의 값에 .. 2022. 9. 13. [html] 기본 태그 1 많이 쓰이는 32개의 태그 중 일부. § 제목 태그 어쩌구 저쩌구 어쩌구 저쩌구 ... 어쩌구 저쩌구 제목이나 부제목에 사용. 숫자는 정보의 중요도를 나타내며 숫자가 클수록 폰트 사이즈 작음. 크기 조절용으로 사용하지 말 것! § 본문 태그 어쩌구 저쩌구에 대한 본문 내용 본문 내용을 담는 태그. p 태그끼리 이어서 쓰면 p태그 덩어리 사이에 한 줄 공백이 자동으로 들어가므로 p를 사용해 여백 조절하지 말고 css를 통해 스타일링 할 것. § 줄바꿈 태그 본문 내용 중에서 행갈이 하고 싶은 부분에 태그 하나만 적용. § 수평선(가로줄) 태그 내용의 분리 등을 위해 가로줄을 긋고 싶을 때 사용하는 태그. § 이미지 태그 상대 경로 절대 경로 § 리스트 태그 메뉴1 메뉴2 unordered list의 약자로.. 2022. 9. 12. 이전 1 다음
