Amazing Story

이전에 로렘입숨에 대해서 설명 드린 적이 있습니다. 영어, 한글로 된 의미없는 텍스트의 나열로, 전체적인 레이아웃을 살펴 보기 위해, 임의로 작성하는 텍스트라고 말씀 드렸네요. 그럼.. 이미지는 어떨까요? 이미지도 전체적인 레이아웃을 보기 위해서 임의로 넣을 수는 없을까요? 그 해답을 들고 왔습니다. 두 군데 사이트를 알려드릴께요. 먼저, https://placeholder.com/ 위에 그림처럼 생겼구요, 보이는 것처럼이미지 태그 안에 src 속성에 "http://via.placeholder.com/가로길이x세로길이" 를 넣으면 된답니다. 바로 이렇게 이미지가 생성됩니다. 이 이미지에 색상이나 글자를 넣을 수도 있어요. 어떻게 나오는지 한번 볼까요? 깔끔하게 나왔네요^^ 두번째로,https://dumm..

가 개봉을 했습니다. 당연히 개봉하자마자 후다닥 보고 왔답니다. ㅎㅎ올 해는 가 마블의 마지막 영화라고 하는데.. 벌써 마음이 허전하네요ㅠㅠ어떻게 또 내년을 기다릴 수 있을지 ㅠㅠ 개인적으로는 첫 번째 포스터가 더 마음에 듭니다.앤트맨과 와스프의 캐릭터를 단번에 알아볼 수 있는 직관적인 포스터라고 생각이 돼서요~ 개봉을 기다리면서 영화관람 포인트를 봤는데, 하나씩 한 번 볼게요. 첫번째는, 의 시점입니다. 에서 어마어마한 일이 있었잖아요. (알만한 사람들은 다 아는..ㅠㅠ)그 일이 일어나기 직전의 일이에요. 이후의 시점이기도 하죠. 영화 중에서도 계속해서 "시빌 워" 얘기가 나와요 ㅎㅎ 앤트맨 스콧 랭이 캡틴 아메리카에 대해서 어떻게 생각하는지도 잘 드러나는 것 같아요^^ 두 번째는, 에서 양자영역으로 ..

9. Group tag(그룹태그)- 그룹태그는 div, span 요소가 있음. 블록요소 div요소로 그룹지으며 인라인 요소는 span을 사용한다. - 웹사이트 제작시 콘텐츠를 논리적으로 분류하지 않음- 작성하였을 시, 브라우저 상에 변화없음 ■ div 12345678910111213141516171819div 태그 사용 예시 사이트 로고 전체 메뉴 메뉴1 메뉴2 메뉴3 메뉴4 사이트 로고 사이트 주소 및 저작권 표시 ■ span 12span 태그 사용 예시제 이름은 대한민국입니다. ★ 블록 VS 인라인 개념정리 ★- block (블록) : 브라우저 상에서 줄바꿈 되어 표시되는 블록 요소 1234block내용1내용2내용3 EX) 블록 태그 예시 - h1 ~ h6 - p - ol li , ul li - dl..

8. Form tag(양식태그)웹문서에서 사용자에게 데이터를 받는 요소들을 (인터랙티브 요소들) 양식요소라고 한다.양식태그는 html사용시 구조만 표현하며 동작은 스크립트로 구현해야 한다. (1) 기본구조form : 폼의 시작과 끝 => 브라우저 상에 표시되는 건 없음fieldset : 개별 폼요소에 대한 그룹핑 => 브라우저에 사각 테두리로 표현됨legend : 필드셋에 대한 그룹이름 => 필드셋 테두리 좌측 상단에 표시label : 폼요소의 이름부여 1234567기본형 검색 (2) 양식태그 종류 : input, label, select, textarea, button 등1) input사용자에게 데이터를 입력받는 박스를 생성 ■ input 기본속성=> 종료태그가 존재하지 않음 ■ type 속성 => i..

7. Table표는 table로 정의하고 tr, td(th)로 표현 1234567891011121314151617181920212223242526기본형1 콘텐츠 기본형2 콘텐츠1 콘텐츠2 기본형3 칸1 칸2 칸3 칸4 1) 표의 제목 달기표의 제목은 caption을 사용하고 table과 첫번째 행 사이에 입력한다. 123456표제목 칸1 2) 제목셀 만들기제목셀을 표현하는 경우 td대신에 th를 사용.제목셀은 가운데 정렬, 볼드체로 표현. 1234567표제목 제목 내용 3) 셀병합하기셀을 합칠 때는 colspan, rowspan 속성을 셀에 작성.셀을 나누는 태그나 속성은 따로 존재하지 않음 1234567891011병합 1 2 2 3 ■ 셀병합시 조건- 행을 더할 때- 열을 더할 때- 행과 열을 더할 때..

5. anchor 태그 (링크 태그) 링크는 a태그를 사용하고, 시작태그와 종료태그로 구성된다. 링크태그는 링크를 구현할 콘텐츠를 a태그로 감싸서 표현. 주요속성은 href, target, title 등이 있다. (1) 기본구조 1콘텐츠 - a태그로 감싸진 텍스트는 밑줄, 글자색상이 바뀜- 마우스 커서 모양이 바뀌며 클릭 가능함 (2) 속성 ■ href(hyper reference) => 참고 대상을 작성1) URL2) 파일(한글, 엑셀, 이미지, PDF 등)3) 이메일4) 가상링크 ■ target => 참조대상을 띄울 창의 위치를 설정1) _self(자신의 창에서 띄움) => 자신의 사이트에서 이동하는 경우 => 기본값으로 생략가능2) _blank(새창 띄우기) => 다른 사이트 이동시 ■ title ..

1. title tag (웹문서의 제목을 작성 -> 브라우저의 제목표시줄에 나타난다. 사이트의 전체의 의미를 알수 있게 간단히 작성) 2. heading tag (제목 태그)- h1, h2, h3, h4, h5, h6 을 사용한다. (1) 기본구조 1content h => heading 제목이라는 의미를 갖고 h뒤의 숫자는 제목수준을 표현 한글문서에서 제목수준의 표현은1. => h11) => h2(1) => h3가. => h4가) => h5(가) => h6 (2) 규칙가. 잘못된 표현의 예 123제목 제목 제목 나. 올바른 표현의 예 : 제목태그는 브라우저에서 표현시 굵은 글씨로 표현하고 제목수준에 따라 글자크기가 다르게 표현 123제목태그 - 가장 큰 제목 제목태그 - 두번째로 큰 제목제목태그 - 세번..

1. HTML: Hypertext(정보의 연결) Markup(정보처리언어기술) Language 의 약자. 웹을 위한 언어. (참고1) 웹문서의 구성 1) 구조 => HTML 2) 디자인 => CSS 3) 동작 => script (참고2) HTML 문서 기본구조 1234 - 웹브라우저는 기본구조를 작성하지 않고 단일태그만으로 구성해도 정상적으로 태그를 해석한다. (참고3) 계층구조 이해하기 1[ { ( ) } ] - 조상 > 부모 > 자식 - 코딩의 가독성을 높이기 위해서 tab 으로 들여쓰기 작성 2. 규칙 - HTML은 tag(태그)라는 명령으로 구성됨 1콘텐츠 - 요소(Element), 태그(Tag)는 시작태그, 종료태그로 구성- 종료태그 앞에는 /를 사용- 웹브라우저에서 표시되는 콘텐츠는 무조건 태..

Lorem Ipsum. 웹 서핑을 하다보면, 그래픽 디자인이나 타이포그래피 그리고 웹 템플릿 등을 통해 흔히 만나볼 수 있습니다. 하지만 로렘입숨의 의미나 용도를 정확히 알지는 못했는데,갑자기 궁금하더라구요. 그래서 한 번 찾아 봤습니다. 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.[참고: 위..

앱테크라고 들어보셨나요?리워드 앱 1등 "캐시워크"를 소개해보려고 합니다. 사용한지는 얼마되지 않았지만괜찮은 것 같아서 소개해보려고요. 캐시워크는 걸을수록 포인트가 쌓이는 만보기형 잠금화면 어플이래요.설치하면 기본으로 잠금화면이 보여요. 잠금화면에서 걸음 수, 소비한 칼로리, 걸은 시간, 거리를 보여주고 있습니다.(가입할 때 입력한 데이터를 기초로 해서, 체형마다 칼로리 소비가 다른데 나름 정확하다고 하더라구요) 광고나 뉴스도 보여줍니다. 옆으로 밀어서 잠금해제 할 수 있어요.처음 어플을 켜면 워크맨이 사용방법을 간단히 알려준답니다. 1. 걷는다. 2. 100걸음에 1캐시씩 보석상자를 얻는다.(하루 최대 100캐시 - 10,000걸음) 3. 보석상자를 눌러 캐시를 적립한다. 4. 캐시워크 어플에서 쇼핑한..