's IT STORY 's IT STORY

가변 마진과 가변 패딩 이해하기 웹사이트의 요소에 마진과 패딩을 설정할 때는 모든 박스들을 감싸고 있는 wrap과 같은 요소들의 너빗값을 고려하여 요소의 마진값과 패딩값을 지정해야 합니다. 만약 너빗값을 고려하지 않은 상태로 마진값과 패딩값들을 설정하면 의도했던 대로 레이아웃이 나오지 않거나 박스들이 밀려 아래로 떨어지는 문제가 생길 수 있습니다. 이는 반응형 웹에서도 마찬가지지만 크기가 가변값으로 설정된다는 차이가 있습니다. 여기서는 가변 마진과 가변 패딩을 설정하는 방법을 알아보고 실습해 보겠습니다. 간격을 자유자재로! 가변 마진 설정하기 반응형 웹사이트에서는 모든 요소가 가변적이어야 합니다. 구조상의 간격 역시 마찬가지죠. 기존의 고정되어 있는 마진(여백)을 변할 수 있게 설정해줘야 합니다. 가변 ..

본격적으로 가변 그리드 배우기 이제부터는 본격적으로 가변 그리드에 대해 알아보고 가변 그리드를 이용한 가변 마진 그리고 가변 패딩도 함께 알아보겠습니다. 가변 그리드 공식 이해하기 앞에서 간단히 % 값을 이용해서 가변 크기의 박스를 만들어 보았습니다. 하지만 사실상 가변 그리드라는 기술은 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술입니다. 공식은 다음과 같습니다. (가변 크기로 만들 박스의 가로 너비 ÷ 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 크기의 % 값 예를 들어 노란 박스를 감싸고 있는 테두리 박스의 가로 너비가 960px이고, 가변 크기로 만들 박스의 가로 너비가 300px이라면 노란 박스를 가변 크기로 만들기 위한 공식은 다음과 같습니다...

반응형 웹 제작을 위한 핵심 기술 맛보기 반응형 웹을 제작할 때는 여러 가지 기술이 필요합니다. 화면 크기나 환경의 변화를 감지하는 기술, 화면 크기를 정확하게 제어하는 기술, 그리고 감지한 화면 크기로 변환하는 기술 등 다양한 기술이 필요합니다. 이 기술들에 대해서는 02장에서 살펴보기로 하고 우선 여기서는 반응형 웹 제작에 필요한 네 가지 기본 개념만 익히고 넘어가겠습니다. 픽셀은 한계가 있다! - 가변그리드 우선 가변 그리드(Fluid Grid)라는 개념을 이해하고 있어야 합니다. 가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술입니다. '가변'또는 '가변적이다'라는 말은 무슨 의미일까요? 학창시절 과학 시..

반응형 웹이란? 반응형 웹이 세상에 나온 이유 2007년, 처음으로 모바일 기기가 세상에 선을 보이자 사람들은 열광했습니다. 이제야 기본적인 검색뿐만 아니라 예약, 주문까지 언제, 어디서든 할 수 있게 되었다고 소리치면서 말이죠. 하지만 모바일 기기의 인터넷 사용에는 문제가 있었습니다. 바로 모바일에서 인터넷을 사용하면 모든 웹사이트들이 모바일 화면 크기로 축소되어 보인다는 점입니다. 그래서 등장한 것이 '모바일 웹'입니다. 모바일 웹과 반응형 웹 모바일 기기에 최적화된 웹사이트를 제공하기 위해 모바일 웹이 등장하면서 사람들은 쾌적한 웹 사용 환경을 접할 수는 있었지만 곧바로 다른 문제에 봉착하게 되었습니다. 모바일 기기뿐만 아니라 태블릿 기기, 패블릿(스마트 폰과 태블릿의 합성어) 기기 등 모바일 기기..

현재 코드 ▼ from flask import Flask, request, redirect app = Flask(__name__) nextId = 4 topics = [ {'id':1, 'title': 'html', 'body': 'html is ...'}, {'id':2, 'title': 'css', 'body': 'css is ...'}, {'id':3, 'title': 'javascript', 'body': 'javascript is ...'} ] def template(contents, content, id=None): contextUI = '' if id != None: contextUI = f''' update ''' return f''' WEB {contents} {content} creat..

현재 코드 ▼ from flask import Flask, request, redirect app = Flask(__name__) nextId = 4 topics = [ {'id':1, 'title': 'html', 'body': 'html is ...'}, {'id':2, 'title': 'css', 'body': 'css is ...'}, {'id':3, 'title': 'javascript', 'body': 'javascript is ...'} ] def template(contents, content): return f''' WEB {contents} {content} create ''' def getContents(): liTags = '' for topic in topics: liTags = ..

현재 코드▼ from flask import Flask app = Flask(__name__) topics = [ {'id':1, 'title': 'html', 'body': 'html is ...'}, {'id':2, 'title': 'css', 'body': 'css is ...'}, {'id':3, 'title': 'javascript', 'body': 'javascript is ...'} ] def template(contents, content): return f''' WEB {contents} {content} create ''' def getContents(): liTags = '' for topic in topics: liTags = liTags + f'{topic["title"]}' re..

이번엔 쓰기 기능(Create)을 구현해 보도록 하겠습니다! 현재 코드▼ from flask import Flask app = Flask(__name__) topics = [ {'id':1, 'title': 'html', 'body': 'html is ...'}, {'id':2, 'title': 'css', 'body': 'css is ...'}, {'id':3, 'title': 'javascript', 'body': 'javascript is ...'} ] def template(contents, content): return f''' WEB {contents} {content} ''' def getContents(): liTags = '' for topic in topics: liTags = liTa..