본문 바로가기

2️⃣ Study/▢ 웹 프로그래밍11

웹 프로그래밍[10] - Flask, bootstrap 👀 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. 01. Flask 🔹 웹서버의 기본적인 작동 방식 🔹 HTTP 프로토콜 의사소통을 위한 규약 통신할 때 주고받는 규약 서버와 클라이언트 간에 주고받는 http 메시지 : Request, Responses 🔹 CGI 표준 입출력 장치를 통한 정보입력과 웹페이지 출력 구조로 서버 프로그램과 외부 프로그램을 연동하는 방식 매우 간단한 구조의 인터페이스 🔹 MVC 사용자 결과물 생성 뷰, 전체 모델을 콘트롤하는 콘트롤러, 전체 웹 서비스 모델을 담당하는 모델로 구성하는 소프트웨어 디자인 패턴 사용자와 웹서버가 1:1로 물려져 있음. 사용자가 웹페이지를 보기 위해선 서.. 2022. 6. 13.
웹 프로그래밍[9] - 웹기획 👀 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. 01. 웹 기획의 이해 🔹 기획의 개념 🔹 웹기획 : 웹에서 일어나는 일을 기획하는 것 비즈니스를 하는데 있어서 웹을 도구로 사용하여 기획한다. 🔹 UX 기획 : 사용자의 정황과 요구사항을 읽고 그것을 제품이나 서비스로 만들어내는 방법론 사용자에게 유용한 가치를 제공하기 위해 고민하는 가치중심적 사고를 기반으로 제품이나 서비스를 디자인 및 설계하는 것이다. 데스크톱 기반의 웹사이트를 제작할 때에도 적용할 수 있지만, 모바일 웹 기획 시 더욱 필요로 하는 디자인· 설계 방법론이다 🔹 성공적인 웹 기획을 위한 요건 명확한 목표 참신하고 신선한 아이디어와 콘텐츠 가.. 2022. 6. 13.
웹 프로그래밍[8] - Javascript 👀 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. 📌 문서 객체 모델 ◾ 문서객체 Dom (document object model) 자바스크립트로 html 과 css 를 제어한다 = Dom 을 제어한다 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식 Html 태그를 자바스크립트에서 사용할 수 있는 객체 object 로 만든 것 문서 객체를 조작한다는 말은 결국 태그를 조작한다는 의미이다. ◾ 기본용어 요소 노드 : 태그와 태그처럼 요소를 생성하는 노드 텍스트노드 : 화면에 출력되는 문자열 정적 생성 : 웹페이지를 처음 실행할 때 HTML 태그로 적인 문서 객체를 생성하는 것 동적 생성 : 웹 페이지를 실.. 2022. 6. 13.
웹 프로그래밍[8] - Javascript basic 👀 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. ⭐ 자바스크립트는 동적인 언어로, html 과 css 를 동적으로 제어할 수 있다. ⭐ 동적인 제어 → 이미 출력된 화면이어도, 사용자의 특정 행동에 따라 있는 요소를 숨길 수도 있고 없는 요소를 만들수도 있다. 디자인이나 스타일도 변경할 수 있다. ⭐ 자바스크립트는 웹에서 빠르게 동작하며 문서적인 측면을 제어하기 적절한 언어이다. 📌 자바스크립트 기본 용어 ◾ 표현식 : 값을 만들어내는 간단한 코드 ◾ 문장 : 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위 ◾ 종결: 문장 마지막에 세미콜론(;) 또는 줄 바꿈 ◾ 키워드 : 자바스크립트를 처음 만들 때 .. 2022. 6. 13.
웹 프로그래밍[7] - CSS : flex, justify-content, align-content, order, flex-grow 📌 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. Flex 🔶 Flex vs Float 국외에서는 float 속성의 레이아웃 제작방식을 비표준 기술로 인식 flex 는 표준 레이아웃 제작방식 국내에서는 HTML5 이전 방식으로 제작을 많이 했디 때문에 유지보수 문제로 float 속성을 사용하여 레이아웃 작업을 한 경우가 더 많다. 둘다 알아둬라! 🔶 Flex 적용하기 속성명 속성값 설명 dispaly flex 자신은 블록 속성을 유지하며 자식 요소에 flex 환경 설정 inline-flex 자신을 인라인 속성으로 변경하며 자식 요소에 flex 환경설정 flex-direction row flex 의 기본축을 가.. 2022. 4. 16.
웹 프로그래밍[6] - CSS : Transform (모양변환), Transition (전환효과), animation, 비트맵vs벡터 이미지, 미디어쿼리 📌 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. 콘텐츠 모양 변형하기 🔶 Transform 2D 속성값 설명 scale 선택한 요소의 크기를 확대, 축소한다. 1보다 크면 확대 skew 선택한 요소를 x축 또는 y축으로 비틀어 변형한다. 원하는 각도를 지정하여 기울기를 조절할 수 있다. translate 선택한 요소를 현재 위치 기준에서 x축 또는 y축으로 이동할 수 있다. rotate 선택한 요소를 회전시킨다. 원하는 각도를 지정하여 회전할 수 있다. 👉 section{} : 검정색 네모 경계선 생성 👉 section article{} : 배경색 네모모양에 맞게 설정 👉 section : nth-of-ty.. 2022. 4. 16.
웹 프로그래밍[5] - CSS : 초기화, Float, position, 콘텐츠 채우기, z-index, 투명도, 그림자 효과, 모서리 둥글게 📌 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. 웹 페이지 레이아웃 구성하기 블록태그를 활용해 css 로 웹 페이지 레이아웃 만들기 시맨틱 태그와 여러 속성을 활용해 레이아웃 지정 디자인적 요소를 입히는게 가장 첫 번째 방식 여러 요소를 배치 👀 CSS 초기화 세밀한 조정작업을 하려면 설정값을 초기화해야함 아래처럼 기본 공백이 발생 원본 👉 목록을 생성할 때 점 효과가 나타난다던지, 링크의 경우엔 밑줄이 들어가고, 여백 padding 공간이 자동으로 설정된 것을 확인해볼 수 있음 👉 이러한 안쪽 여백, 꾸며주기 효과를 모조리 초기화하기 초기화 적용 간격이 사라지고 정렬 기호가 사라짐 원하는 여백과 모양을 더.. 2022. 4. 15.
웹 프로그래밍[4] - CSS : 배경색, 배경 이미지 삽입 📌 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. 배경색 지정하기 🔶 배경색상 속성 속성명 속성값 설명 background-color 영문명 영어 색상명으로 배경색 지정 rgb(0,0,0) RGB 표기법으로 지정 #000000 16진수 표기법으로 지정 🔶 16진수 변환방법 배경색 이미지 삽입 속성명 속성값 설명 background-image url(이미지 경로) ◾ 이미지 경로는 ../ 로 시작해야 작성중인 css 에서 빠져나와 img 파일로 넣어진다. 배경 이미지를 삽입 background-repeat repeat, repeat-x, repeat-y, no-repeat 배경 이미지를 반복 background.. 2022. 4. 15.
웹 프로그래밍[3] - CSS : 높이와 너비 지정, 여백 지정 📌 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. 웹페이지 영역별 크기 정하기 👀 html 태그의 영역별 크기와 바깥쪽, 안쪽 여백을 지정한다. 🔶 너비와 높이 정하기 속성명 속성값 설명 width, height px 너비값과 높이값을 px 단위로 지정한다. % 부모 태그를 기준으로 너비값과 높이값을 % 단위로 지정한다. vw 웹 브라우저의 너비를 기준으로 너비값과 높이값을 백분율로 지정한다. vh 웹 브라우저의 높이를 기준으로 너비값과 높이값을 백분율로 지정한다. 👉 % 방식을 적용한 2th article 에 해당하는 부분에서 높이 값이 변경되지 않은 이유 : body에 따로 높이값을 지정하지 않으면 높이가.. 2022. 4. 15.
웹 프로그래밍[2] - CSS : 요소선택, 클래스 선택, 폰트, 텍스트 📌 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. CSS 👀 Cascading Style Sheets 레이아웃과 스타일 색상 크기나 위치, 배치방법, 이미지 크기 👀 사용법 내부 스타일 시트 외부 스타일 시트 인라인 방법 👀 html5 에서 css 파일 연결하는법 일단 css 폴더를 만들고 그 안쪽에 css 파일을 생성해야함 : href = "css/style.css" link:css 치고 enter 한 후 href 부분 입력 css 파일에서 한글을 인식하기 위해 아래와 같이 @charset "utf-8"; 을 입력 ' 👀 기본 문법 전체 선택자, 태그 선택 🔶 전체선택자 *{ } 별표 🔶 태그선택 선택자를 .. 2022. 4. 14.
728x90

티스토리툴바