HTML_CSS (14) 썸네일형 리스트형 단락을 나누는 <p> 태그 태그 어떠한 긴 글에서 단락을 나누게 해주는 태그이다. 웹 브라우저는 html 코드에서 사용자가 임의로 줄바꿈 한 것을 인식하지 못하기 때문에 줄바꿈을 해주거나 단락을 나눠야지 가독성이 올라간다. 태그 사용법 ptag.html 첫번째 단락 두번째 단락 첫번째 단락 두번째 단락 (실행결과) 이미지를 삽입하는 <img> 태그 태그 이미지를 삽입 시킬 수 있는 태그이다. 이 태그는 여는 태그만으로 정보 제공이 가능하기 때문에 닫을 필요가 없는 태그이다. 닫는 태그가 필요없는 대신 여는 태그안에 속성을 넣어서 정보를 제공해 주어야 한다. 태그 사용법 imgfile.html (사용한 사진) (실행결과) 태그에 필수로 들어가야 하는 src 속성은 이미지 파일의 경로를 값으로 받는다. html 파일이 이미지와 같은 폴더 내에 있으면 "이미지 파일 이름.확장자"만 적으면 된다. 하지만 아래의 사진들 처럼 다른 폴더에 사진이 있다면 위의 저 코드로는 이미지를 불러올 수 없을 것이다. 이런 경우에는 각 상황에 맞춰서 경로를 변경해주면 된다. 상위폴더 ../는 상위 폴더라는 뜻을 가지고 있다. 저 경로를 해석하자면, imgfile.html이.. 리스트를 표현하는 <li> 태그 태그 태그는 웹 페이지에서 리스트를 표현하는 태그이다. 웹 페이지에서 리스트의 사용 용도는 어떠한 정보를 나열해서 한 눈에 알아보기 편하게 하거나, 정보의 순서를 나열하기 위함이다. ex) 웹 사이트를 제작하는데 기본적으로 배워야 할 것 HTML CSS JavaScript 태그 사용법 list.html 리스트1 리스트2 리스트1 리스트2 리스트1 리스트2 리스트2-1 리스트2-2 리스트1 리스트2 (실행결과) 태그는 원하는 내용을 리스트로 만들어주는 역할을 한다. 리스트를 나타내는 기본 값으로는 흑색 원을 사용한다. 태그는 태그와 함께 쓰이며 관련이 있는 리스트들 끼리 묶어주는 역할을 하거나, 위의 예제 코드처럼 리스트의 하위 리스트를 만드는 역할을 한다. 그리고 태그 내부의 리스트들을 순서없이 모양으로.. HTML의 뜻과 구조 HTML HTML은 HyperText Markup Language의 약어로써 웹 페이지를 위한 마크업 언어이다. 우리가 현재 보고, 사용하는 웹 페이지들은 전부 이 HTML 을 이용하여 구성되어있다. HTML이 마크업 언어라고 했다. 마크업 언어라는 것은 태그를 이용하여 문서나 데이터의 구조 정의하는 언어이다. 그렇기에 HTML 또한 태그를 이용하여 문서를 정의 한다. 하지만 일반 마크업 언어와는 다르게 HTML은 각 태그들이 규칙으로 지정되어 있고 그 태그들이 가진 기능들도 각각 다르다. 태그는 꺽쇠()로 이루어져 있으며 태그 내부에 내용이 어떠한 역할을 하는지 알려주는 것이다. 이처럼 태그는 여는 태그와 닫는 태그가 있고, 태그를 열은 순서대로 다시 닫아야 한다. 단지 문서를 정의해주는 언어.. [HTML_CSS] Chrome 개발자 도구를 이용하여 쉽게 편집하기 지금 당장의 티스토리 블로그도 그렇고 프론트엔드를 하면 엄청난 코드 수에 원하는 구역을 쉽사리 찾지 못하는 경우가 있다. F12를 누르면 개발자 도구 창이 뜨게 된다. 여기서 개발자 도구 창의 왼쪽 맨 위를 보면 사각형에 커서가 있는 아이콘이 있다. 이걸 누르고 원하는 부분에 마우스를 가져다 대면 그 부분과 관련된 HTML(파란색 원)과 바로 밑에 CSS(빨간색 원)가 보인다. 이렇게 쉽게 찾고 싶은 곳을 알 수 있다. 수정할 부분에 대해서 개발자 도구를 이용해 미리 적용시켜 보는것도 가능하다. 예를 들어, 구글의 배경색을 검은색으로 하고 Gmail 과 이미지의 글자를 바꾸고 싶다면 위의 방법으로 그 부분의 HTML과 CSS로 가서 코드를 더블클릭하고 수정하면 된다. 글자에 테두리, 그림자 넣기 위의 사진처럼 메인화면에서 슬라이드 부분에 사진이 하얀색 계열이면 제목의 가독성이 떨어져 보여서 그림자를 넣거나 테두리 색을 입히기로 했다. 개발자 모드로 대충 코드의 어느 부분인지 파악한다. 찾아보니 빨간선으로 친 부분을 보면 될듯 하다. 그 중, 글씨를 제어하는 font 가 들어간 첫번제 빨간 밑줄 부분으로 가서 밑의 코드를 추가하도록 한다. text-shadow text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; (실행결과) 간단하게 설명해서 첫번째 줄부터 밑에 줄까지 위, 오른쪽, 아래, 왼쪽 이다. 각각 한 부분 씩 1px로 색을 주어서 테두리 처럼 만드는 것이다. 당연하게도 픽셀을 높이면 굵기가 굵어진다. (1px 차이가 꽤나 커보인.. 이전 1 2 다음
