IT개발/HTML & CSS5 Flexbox & Grid 레이아웃(Layout) 구성 요소를 공간에 효과적으로 배열하는 일, 또는 그 기술 대표적인 CSS 레이아웃 기술들 일반적인 문서의 흐름 display 속성 flexbox grid layout float 속성 position 속성 기타 등등 플렉스박스(flexbox) 플렉스박스는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식을 말한다. 플렉스 박스에서, 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템간의 상호작용을 통해 결정 주요 용어 플렉스 컨테이너: 플렉스박스 방식으로 레이아웃을 결정할 요소 플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스 박스 방식으로 배치되는 요소 flexbox의 속성 flex-direction 플렉스 컨테이너의 주축을 결정하는 속성 행은 가.. 2023. 1. 26. CSS 공부 방법 정리 대학교 학부때 C언어, C++, Java 등의 언어를 사용한 backend 개발을 하던 내가 첫 회사에 취업하고 web(html, css, javascript)등의 front-end을 배우고 Spring boot를 이용해서 back-end로 RestAPI를 개발하면서 계속 뭔가 부족함을 느꼈다. 첫 회사에서 계속되는 무리한 일정 요구, 더 잘해야 한다는 내 자신에 대한 채찍질, 나를 이끌어줄 사수의 부재 등등 이런 생활이 반복되면서 번아웃이 심하게 왔고 퇴사를 하고 몇 일 ~ 몇 주간 개발자(프로그래머)라는 직업에 대해 생각하고 내가 싫었던건 그 회사의 시스템이였지 개발이 아니라는걸 느끼고 또 몇몇 멘토링의 결과 더욱 성장하는 한명의 개발자가 되고 싶은 욕심이 강해졌다. 퇴사 하기 전의 회사에서는 SI회.. 2023. 1. 12. html5 기본 TAG들 웹페이지의 구성하는 기본 태그 문서 형식 정의 tag 문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. html tag html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 화면에 표시할 모든 콘텐츠는 이곳에 기술한다. html은 글로벌 어트리뷰트를 지원 lang 어트리뷰트를 많이 사용 head tag head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재 메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다. title tag.. 2022. 6. 19. semantic web Semantic web(시맨틱 웹) SEO(검색 엔진 최적화: Search Engine Optimization) 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 크롤링 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다. 검색엔진의 크롤러가 이를 수행 인덱싱 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다. 검색엔진의 인덱서가 이를 수행 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTM.. 2022. 6. 19. 이전 1 2 다음 반응형
