본문 바로가기

📺 Front End/-- HTML & CSS16

[CSS] Box Modeling에 필요한 모든 것(margin, padding, border) 한 웹 사이트를 봐보자. 웹사이트는 내가 디자인적으로 좋아하고 학습을 위해 벤치마킹 하고 있는 디자인 베이스를 볼 것이다. 여기 이 멋진 디자인베이스 홈페이지에도 Box Modeling이 적용되어 있다. 이런 빨간 네모들이 Box이고 Box 가 모여 하나의 멋진 웹 사이트를 구성한다. 바로 이게 오늘 배워볼 Box Modeling이다. 들어가기 전에 먼저 이야기 하자면 Box Model을 잘 이용해야 우리가 원하는 공간에 배치하고, 조절, 나열할 수 있게 된다. 최신 CSS 기술에는 Flexbox라는 것이 생겼다. Flexbox도 사실상 Box Model에 상응하는 개념이니 다음에 배워볼 Flexbox를 위해 이번 시간에 Box model이 무엇인지 잘 알아보고 넘어가도록 하자. Box Modeling .. 2020. 10. 4.

[CSS] Css의 Cascading의 의미 CSS 우리가 CSS를 배우기 위해서 가장 먼저 해야할 것은 이름의 뜻을 파악하는 것이다. Cascading Style Sheets Cascading이란 폭포를 뜻한다. 여기서 CSS에는 어떤 의미로 적용되냐? HTML 요소들은 하나 이상의 CSS 스타일에 영향을 받을 수 있다. 그 말은 즉, 우리가 Welcome 이라는 HTML 요소에 글씨 크기를 조절하는 스타일, underline의 스타일 + 주황 배경색을 적용한다고 하면 이미 3가지의 스타일링에 영향을 받는 것이다. 이런 특성 때문에 어떤 스타일을 적용 받을지에 대한 우선순위에 대한 결정이 중요한 역할을 한다. 이를 Cascading(캐스캐이딩)이라고 한다. Cascading의 3가지 요소 Cascading을 결정하는 3가지 요소가 있다. 중요도 .. 2020. 10. 4.

6. HTML 폼 태그 폼(form) 웹에서는 사용자에 대한 웹 서버의 일방향적 정보 전달 뿐 아니라 사용자와 웹 서버간의 데이터를 주고받아야 한다. 이러한 양방향적 특성을 위해 태그를 사용한다. 폼 태그의 사용 폼 태그 HTML 문서에서 폼을 통하여 사용자의 입력 데이터를 웹 서버로 전송한다. 태그 안에 또다른 태그를 포함하는 것은 불가능하다. action : 데이터를 처리할 프로그램의 rul method : 데이터를 서버에 전달하는 방법 get : query string이 그대로 url에 나타나며 데이터 양이 제한되고 노출된다. post : message body에 포함시켜 서버에게 전달되며 양의 제한이 없으며 데이터가 노출되지 않는다. encrypte : "application/x-www-form-urlencoded(기본.. 2019. 11. 29.

5. HTML 프레임 프레임 웹 사이트에 자세히 보면 여러 프레임을 이용하여 웹 페이지를 구성하는 경우가 흔하다. 이는 프레임을 여러 화면으로 구역을 나누어 각기 다른 기능을 제공한다. 각 프레임마다 특정 역할을 수행하는 페이지로 효과적인 웹을 만들 수 있다. 프레임의 정의 프레임의 구조는 첫 번째로 태그를 선언하고 태그로 실제 프레임을 정의한다. 태그 프레임을 선언하는 동시에 프레임의 수와 크기를 설정한다. 프레임의 크기를 설정하는데에는 픽셀 수로 설정, 브라우저 크기에 대한 비율(%)로 설정 ,나머지 전부를 설정이 있다. 나머지 전부는 *로 설정한다. 태그 frame 태그의 src 속성을 통하여 프레임에 표시할 HTML 문서를 지정한다. --------------------------------------------- m.. 2019. 11. 29.

이전 1 2 3 4 다음

티스토리툴바