일상기록소✍️

▶ 제작에 필요한 웹 기술 정리 웹 페이지를 만드는 데에 있어 제작 순서도 중요하지만 본인이 원하는 것을 보여주기 위해서는 필요한 웹 기술 있어야 한다고 생각합니다. 따라서 저는 몇 가지 홈페이지 제작에 필요한 웹 기술에 대하 간략히 정리를 하고자 합니다. ◈ 제작에 필요한 웹 기술 바로 알기 1. MediaQuery를 이용한 제작기술 MediaQuery란 화면해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3 속성을 말합니다. 예) 가로너비가 320px이상 ~ 768이하 @media screen and (min-width:320px) and (max-width:768px;) { //실행문 } 2. Viewport 바로 알기 Viewport는 미디어쿼리랑 연결되어 같이..

▶ 웹 페이지 제작순서 바로알기 안녕하세요? 오늘은 웹 페이지를 만드는 과정에 대한 설명을 드리고자 합니다. 처음부터 디자인부터 브라우저에 보이기까지 어떻게 작업을 시작해야할지 막막하신 분들이 있을거라 생각합니다. 그런 분들을 위해 간략하게 설명을 드리고자 합니다.^^ ◈ 제작과정 순서 먼저 첫번째로 디자인 작업에 앞서 새로 만드는 웹 페이지든 리뉴얼 하는 웹 페이지든 간에 레이아웃 작업을 먼저 구상해야 합니다. 각 영역별 어떤 디자인과 어떤 내용이 들어갈 것이며 반응형으로 작업을 하게 될 때의 레이아웃 고려 등 구체적인 기본구조를 짜야 합니다. 레이아웃 작업을 마쳤으면 html태그를 사용하여 들어가야 할 내용에 맞게 영역을 잡아줍니다. 즉 뼈대를 만들어주는 작업 진행하는 것을 말합니다. html태그 마..

▶ [Jquery] Full drop down menu 만드는 방법 (내용정리) 이번에 설명드릴 제이쿼리는 홈페이지를 들어가보면 메뉴를 클릭했을 때 또는 마우스로 해당 메뉴에 갔다 댔을 경우 메뉴가 한꺼번에 보여지는 것을 알려드리고자 합니다. 보통 이런 네비게이션 메뉴는 메뉴를 한꺼번에 보여줘야 하는 특성을 가진 홈페이지를 만들 때 주로 사용합니다. (예: 관공서, 공공기관, 기업 홈페이지) 1. HTML 마크업 구조 1. 언어를 한국어로 나오게 출력, 위와같이 적용이 안될 경우에는 특수문자 형태로 한글이 깨져보이게 됩니다. 2. 해당 파일을 불러 올 수 있도록 경로 표시(css파일 및 jquery파일) 3. ~~~~ 전체 메뉴를 감싸는 영역 4. 대메뉴1 대메뉴2 대메뉴3 대메뉴4 대메뉴5 대메뉴6 상..

▶ [CSS기초] CSS3 문서 적용 하는 방법 CSS문서를 적용시키는 방법은 크게 3가지로 나눌 수 있습니다. 내부스타일, 외부스타일, 인라인스타일 적용으로 나뉘어 집니다. 1. 내부스타일 적용 (Embedded 스타일 적용) HTML 파일 내에 CSS 코드를 직접 포함하여 스타일이 적용되도록 하는 방법으로 내부스타일을 적용 할 때는 태그안에 넣어주거나 또는 밖에 입력해주셔도 크게 상관은 없습니다. 2. 외부스타일 적용 (External 스타일 적용) CSS 파일을 외부에 생성하여 HTML 문서에 연결하는 방식으로 요소를 사용하는 방법과 @import 명령을 사용하는 두 가지 방식이 있습니다. 3. 인라인 스타일 적용 (Inline 스타일 적용) 특정 HTML 요소에 style 속성을 사용하여 CSS코..

▶ [CSS기초] CSS3 선택자 기본 개념 안녕하세요? 오늘은 CSS3 선택자 기본개념과 어떻게 적용하는 것인지에 대해 알아보도록 하겠습니다.^^ HTML이라고 하면 웹 페이지를 만들때 기본레이아웃, 뼈대를 구성하기 위한 것으로 CSS스타일을 적용시키지 않으면 일반적인 텍스트에 일렬로 보여질 뿐 입니다. 따라서 기본적인 레이아웃 구성이 완료되었으면 CSS스타일을 적용시켜 디자인적으로 갖춰진 모습을 보여줄 수 있습니다. CSS스타일을 매기게 되면 위와 같은 이미지로 매기는 것인데 처음 접하시는 분들은 어렵고 헷갈리실 것이라 생각합니다. (저도 처음 배웠을 때는 뭐가 뭔지도 몰랐으니까요..^^;;) 이제 저렇게 CSS스타일을 매기는 방법과 선택자에 대해 알아보도록 하겠습니다. ◈ CSS3 선택자 기본 개념..

▶ [HTML5]목록 태그, 테이블 태그 내용 안녕하세요? 오늘은 자주쓰이는 태그에 대해 설명을 하려고 합니다. 목록태그의 경우는 주로 메뉴를 만들 때 주로 사용되는 태그이며 테이블 태그의 경우는 표를 만들때 사용됩니다. 1. 목록 태그 웹 페이지에서 빼놓지 않고 등장하는 요소로 일반적으로 페이지를 이동할 때 사용되는 메뉴로는 네비게이션 메뉴라고 부릅니다. 네비게이션 메뉴를 만들 때는 목록 태그를 사용하는 것이 일반적입니다. (★ 여기서 저는 ul>li태그로 이루어진 목록 태그만 설명드리려고 합니다.) 태그 이름 설명 ul 순서가 없는 목록 태그 li 목록 요소 위의 내용 처럼 코딩을 하게 되면 ul태그를 사용하여 글머리에 기호가 붙은 목록이 생성됩니다. 코딩 후 브라우저로 확인해보면 위와 같은 이미지처..

▶ [jquery]기본 슬라이드 코딩 이해하기 제이쿼리를 사용할 때 가장 기본적으로 많이 쓰여지는 것으로 주로 메인페이지 배너에 사용됩니다. 그래서 제이쿼리 기본 슬라이드 배너 코딩을 할 때 어떻게 작업이 이루어지고 적용이 되는 지 이해를 해보도록 하겠습니다. 1. → 제이쿼리 박스슬라이더에 기본 css가 저장되어 있음 3. → $(document).ready(function() 실행할 함수문서 정의 → $('.bxslide_bg').bxSlider HTML 태그안에 있는 .bxslide_bg선택자와 어떻게 실행을 내릴 .bxSlider 메서드(함수) → mode: 'horizontal' 메서드에 어떻게 명령을 내릴 속성 값, 가로의 방향 값을 지정 auto: true 자동으로 슬라이드 speed: 60..

▶ [HTML5] 개행 태그, 앵커 태그 기본내용 1. 개행 태그 개행 태그인 태그는 문단의 내용이 긴 경우 단락을 띄어주고자 주로 사용하는 태그입니다. 이 태그는 HTML5로 넘어오면서 을 사용 없이 만 사용해도 적용이 되는 것을 확인하 실 수 있습니다. 위의 코딩을 저장하여 브라우저로 확인을 해보면 문단 단락이 띄어서 출력되는 것을 확인 하실 수 있습니다. ★여기서 잠깐~! 간단한 설명 이것은 꿀팁아닌 꿀팁(?) 일수도 있겠지만 코딩을 한 후 되도록 익스플로러, 크롬, 파이어폭스, 오페라, 사파리 등 다양한 브라우저로 확인을 하는것이 좋습니다. 대신 브라우저 상에서 탐색기를 통해 오류나는 부분을 파악하고자 할 때에는 제 생각으로는 익스플로러 보다는 파이어폭스나 크롬을 추천해 드립니다.^^ 익스플로러에..

▶ [HTML5] 제목 태그, 본문 태그 기본내용 정리 안녕하세요? 오늘부터는 주요 기본태그 내용정리 및 사용했을 시 어떻게 홈페이지에서 보여지는 것을 설명드리려 합니다. 1. 제목 태그 HTML5의 대표적인 글자 태그는 제목을 입력할 때 사용하는 제목 글자 태그 입니다. 태그이름 설명 h1 첫번째로 큰 제목 글자 태그 h2 두번째로 큰 제목 글자 태그 h3 세번째로 큰 제목 글자 태그 h4 네번째로 큰 제목 글자 태그 h5 다섯번째로 큰 제목 글자 태그 h6 여섯번째로 큰 제목 글자 태그 h1태그부터 h6태그의 h는 header를 의미하며 각각의 숫자는 크기 및 우선 순위를 나타냅니다. 위의 내용을 토대로 종류별 제목태그를 코딩해보면 아래와 같은 결과가 나오는 것을 확인 하실 수 있습니다. ★잠깐!! ..

▶ [HTML기초]HTML5태그의 요소와 속성2 안녕하세요? 오늘은 HTML5태그의 요소와 속성 두번째 시간을 가져보려 합니다. 태그를 사용하기에 앞서 사용하는 태그에 대한 요소에 대한 개념을 이해를 하고 사용하는 것이 훨씬 더 빠른 작업을 진행할 수 있으며 오류도 줄여 줄 수 있습니다. ● 인라인요소와 블럭요소란 무엇인가? ★ 내용에 대한 이해를 높이고자 이미지를 첨부 합니다. 인라인요소란? 마크업한 콘텐츠가 오른쪽방향으로 생성되는 것이며 콘텐츠가 가지고 있는 길이만큼 공간을 차지합니다. display:inline-block 블럭요소란? 마크업한 콘텐츠가 아래방향으로 생성되는 것으로 브라우저 및 소속된 공간을 처음부터 끝까지 채우는 특징을 가졌습니다. display:block ▶주요태그 정리 및 표시형..