Coding (12) 썸네일형 리스트형 [HTML/CSS] 06. CSS 5가지 position 속성값 🔍 1. static(기본값) position: static; 기본 흐름에 따른 배치top, bottom, left, right이 적용되지 않는다. 🔍 2. relative position: relative;top: 10px; /* 현재 위치에서 15px 아래로 이동 */left: 15px; /* 현재 위치에서 15px 오른쪽으로 이동 */ 일반 흐름에 따른 배치추가로 지정한 top, bottom, left, right 값에 따라 이동 부모 box 안에 배치하되, top과 left만큼 이동시킨다. 🔍 3. absolute position:absolute;top: 10px; /* 15px 아래로 이동 */left: 15px; /* 15px 오른쪽으로 이동 */ 상위 요소 중에서 relative.. [HTML/CSS] 05. CSS 요소 정렬과 배치 🔍 요소 수평 배치 한 화면에 블록을 배치하는 방법은 2가지가 있다. display : inline-block; inline-block은 박스 내부는 block 식으로, 외부는 inline 식으로 한다는 뜻이다.이걸 사용해 박스를 수평으로 배치할 수 있는데, 다만 이는 화면 크기가 줄어듬에 따라 흐트러진다. display : flex; flex는 상위 요소에 주게 되면 내부 요소들이 특정 배치를 갖게 만드는 옵션을 말한다.inline 블록의 문제점을 해결하기 위해 만들어졌는데, 화면 사이즈가 달라지면 박스가 아래로 내려가는 게 아니라 flexable하게 반응형으로 대응해 박스 크기를 줄이게 된다. 🔍 수평 정렬, 수직 정렬 부모 box에 설정을 주어 자식 box를 어디에 위치시킬지 정할 수 있.. [HTML/CSS] 04. CSS 박스 모델 🔍 inline과 block 방식 div와 span의 또 다른 차이점은, div와 달리 span 태그는 너비와 높이를 가지지 않는다는 것이다. span은 inline 태그로 안에 content가 없으면 너비와 높이를 가지지 않는다.그래서 span은 텍스트를 입력하는데만 사용되며 대부분의 작업은 div가 사용된다.display: inline; // 인라인 방식으로 변경display: block; // 블록 방식으로 변경 이 display 속성에 inline, block 등 값을 줘서 어떻게 동작할지 방식을 바꿔줄 수 있다. 🔍 CSS의 박스모델Contents : 콘텐츠 영역으로 텍스트 및 이미지의 실제 영역.Padding : 테투리와 콘텐츠 사이의 안쪽 여백.Border : 박스를 둘러싼 테투리 영.. [HTML/CSS] 03. HTML에 CSS를 적용하는 3가지 방법 🔍 1. 인라인 스타일HTML 요소에 직접 style 속성을 사용하여 CSS를 적용하는 방법 간단하고 원하는 특정 요소에만 적용 가능하나, 유지 보수가 어렵고 가독성이 안좋다.또, 나중에 여러 css를 작성하다보면 어디에 어떤 스타일을 적용했는지 파악하기 난해해 중복된 코드가 많이 발생하며 스타일을 바꾸기 어렵다. 🔍 2. 내부 스타일 (임베디드 스타일)HTML 문서의 태그 내에 작은 프로젝트에 적합하며, 동일한 문서 내의 스타일을 각 파일별로 관리할 수 있다.그러나 다른 HTML 파일에 재사용이 불가능하며 HTML 파일 안에 CSS가 섞여있어 보기가 어렵다. 🔍 3. 외부 스타일 (링크드 스타일)별도의 CSS 파일을 만들어 HTML 문서에 링크로 연결하는 방법 현업에서 가장 많이 사용하.. [HTML/CSS] 02. 시맨틱 마크업 (Semantic Markup)이란? 🔍 와 와 은 HTML에서 가장 기본적인 컨테이너 요소로, 각각 다른 용도와 성격을 가지고 있다.This is a A with some text inside.This is a B with some text inside. : 인라인 태그. : 블록 레벨 요소 span은 옆으로 이어지는 인라인 태그기 때문에 줄바꿈이 발생하지 않지만, 는 한 공간을 차지하기 때문에 줄바꿈 발생하게 된다. 🔍 Semantic 태그란? Semantic 태그는 HTML5에서 추가된 태그로, 웹 페이지의 구조를 더욱 의미론적으로 표현하는 데 사용된다.div와 span 등의 일반적인 컨테이너 태그를 사용하여 웹 페이지를 구성하면, 이 태그들은 그 자체로는 어떤 의미도 가지지 않기 때문에 웹 페이지의 내용을 이해하기 .. [HTML/CSS] 01. 웹 개발의 시작 🔍 웹 개발의 시작 https://dribbble.com/디자이너 리소스를 구하기 힘들때 이용하는 홈페이지.다양한 웹 디자인을 무료로 제공하며 사이드 프젝를 만들 때 디자인을 참고하자. 🔍 HTML, CSS, JavaScript ◆ 💻 HTML의 기본 구성 웹 페이지 제목 여기에 콘텐츠를 작성합니다. : 이 문서가 어떤 특징이 들어가 있는지 문서에 대한 설명이 들어가 있다. : 웹 페이지의 제목을 정의, 검색 엔진 최적화(SEO)에 중요한 역할 : 웹 페이지의 메타데이터(저작자 등)를 정의 : JavaScript 코드 : CSS 코드 지정 : 실제 사용자에게 보여지는 내용이 들어간다. ◆ 💻 CSS란? Cascading Style Sheet의 줄임말.HTML이 골격, 그 골격을 .. [이론] 02. 프론트엔드와 백엔드, 그리고 API 🔍 프론트엔드란? 사용자가 만나게 되는 웹사이트의 앞단HTML, CSS, JavaScript라는 세 가지 요소로 이루어져있음 🔍 백엔드란? 서버 역할.데이터를 처리, 가공, 저장해서 앞단으로 보내주는 역할이 백엔드.서버 언어(Python, Java, Node.js) 등과 데이터베이스 언어(MySQL, MongoDB) 등으로 이루어져있다. 🔍 API란? Application Protocol Interface의 약자로, 프론트엔드와 백엔드를 연결시켜 주는 역할을 한다.서로 다른 소프트웨어 간에 정보를 주고 받기 위한 통신 규약이다. [이론] 01. 컴퓨터에 대해 이해하기 🔍 데이터로 이루어진 컴퓨터의 뇌구조 컴퓨터는 우리랑 다른 0과 1의 세계에 살고 있다그래서 컴퓨터적 사고를 통해 도출한 아이디어를 컴퓨터에게 전달.전달된 내용으로 바탕으로 컴퓨터가 효과적으로 일을 수행한다 🔍 컴퓨터적 사고를 하는 법을 의식적으로 수행하자!이 컴퓨터적 사고를 검증하고 평가하기 위한 수단이 코딩테스트다. 🔍 컴퓨터처럼 생각하기 위해선?분해 (Decomposition) 패턴 인식(Pattern Recognition)추상화 ( Abstraction)알고리즘( Algorithms)큰 문제를 작은 문제로 분해해서 패턴을 찾고 추상화 또는 일반화 해서 최종적으로 알고리즘을 도출하는 게 컴퓨터적 사고다.의식적으로 문제를 분해하는 과정을 거쳐보자 🔍 알고리즘이란? 문제를 해결하는 .. 이전 1 2 다음
