HTML 32
[html] 태블릿 사이즈 설정하기
안녕하세요. 플입니다. 오늘은 html에서 태블릿 사이즈를 설정해보겠습니다. 1. css 불러오기 우선 태블릿 사이즈를 코딩해준 css를 불러옵니다. 일반 css를 불러오는 것과 동일하게 link를 이용해 불러옵니다. rel값은 stylesheet를 입력해주세요. type은 text/css입니다. href는 폴더 경로를 입력해주세요. 저는 css폴더 안에 있어서 css/파일명입니다. 2. media css를 불러온 link 안에 media를 입력해주세요. 값은 only all and (max-width:1297px)을 입력해줍니다. 여기서 max-width값은 브라우저를 줄여보면서 설정해주세요. max-width값이 설정된 기준 아래에서 불러온 css가 적용됩니다. 3. 확인 F12 혹은 오른쪽 클릭 후..
[영상] html 코딩
안녕하세요. 플입니다. 오늘은 html코딩 영상을 찍어봤어요. 1. html 코딩 메인 페이지 목록과 동일한 디자인으로 포트폴리오 페이지도 코딩해봤습니다. html작업이라 별도의 설명없이 빨리감기만 해봤어요. 2. 섬네일 섬네일 글씨를 좀 키워봤어요. 전보다 잘 보이는 것 같아서 만족입니다. 그럼 이만. 총총.
[html] 주석 달기
안녕하세요. 플입니다. 오늘은 html에서 주석을 달아보겠습니다. 1. 주석 내용 주석 내용은 보통 홈페이지 화면에서는 보이지 않지만 메모할 말 등을 적어둡니다. 말 그대로 주석이죠. 주로 부가설명을 하거나 저는 제목 대신 사용하기도 합니다. 이미지에서 적은 All은 포트폴리오 페이지에서 모두에 해당하는 부분으로 코드만 보고도 위치를 알아보기 편하게 주석을 넣어주었습니다. 2. 주석 적기 주석은 시작할 때는 를 적어서 끝내줍니다. 이 주석은 여러 줄도 주석 처리가 가능하기 때문에 코드를 짜두었지만 당장은 필요가 없고 미래에 필요할지도 모를 경우 전체를 주석 처리해줄 수도 있습니다. 그럼 이만. 총총.
[html] 타이틀 코딩하기
안녕하세요. 플입니다. 오늘은 포트폴리오 서브페이지 타이틀을 코딩을 해보겠습니다. 1. 전체 디자인 확인하기 우선 시안을 보고 전체 디자인을 확인합니다. 제 시안을 살펴보면 세 가지 특징을 알 수 있습니다. 첫 번째, 전체적으로 가운데 정렬이다. 두 번째, 큰 제목과 소제목이 있다. 세 번째, 배경이 있다. 기본 틀이 되는 html은 논리적으로 코딩하는 것이 중요함으로 세가지 특징을 생각하면서 코딩하도록 합니다. 2. 코드 구상하기 구상한 코드를 이미지화해봤습니다. 첫 번째로 배경을 넣어주려면 감싸주는 태그가 필요하겠죠. 간단히 div로 감싸주기로 합니다. 감싸주는 태그는 여러 경우가 있지만 사이즈를 맞춰야 하니 block태그인 것으로 하는 것이 좋습니다. 두 번째로 큰 제목은 서브 페이지의 주제입니다...
[html] <span>
안녕하세요. 플입니다. 오늘은 태그에 대해 알아보겠습니다. 1. 태그 span은 '기간, 폭'을 뜻하는 영어단어입니다. 태그로서 가지는 의미는 가상의 폭. 즉, 가상의 공간을 가지게 됩니다. 사실 영어 의미는 이해 못하셔도 괜찮습니다. '아 태그는 공간'정도만 알고 계시면 됩니다. 태그는 와 같이 공간을 지정해주는 태그입니다. 와 다른 점은 inline요소라는 점입니다. 2. 태그의 활용 스팬 태그는 보통 큰 의미가 있는 곳에 사용하는 태그는 아니고 디자인적으로 구분이 필요할 때 주로 사용합니다. 예를 들어 의미가 있는 태그는 태그나 태그 등이 있습니다. 태그는 링크를 태그는 이미지를 의미하죠. 표시된 부분은 태그로 할 예정입니다. 그런데 문제가 있습니다. 아시겠나요? 배경에도 색이 들어가고, 텍스트 부..