Programming Language/HTML & CSS (웹 개발 관련) 썸네일형 리스트형 [HTML CSS] 이미지와 텍스트 테두리 및 line style 적용하는 방법은? html border 테두리 설정에서는 순서대로 속성을 정해주면 되며, 에는 hidden/ solid/ dotted/ dashed/ double/ outset/ inset/ groove/ ridge 스타일이 있어 이들 중 하나로 지정해주시면 됩니다. 1. border 속성은 어떤 순서대로 지정될까요? border : 순서대로 지정해주면 됩니다. /* 이미지 코드 설명 태그 */ img { border: 10px dashed chartreuse } /* 본문 태그 설명 부분 */ p { border: 10px double orangered; width: 320px; text-align: center; } 선 너비에서는 대표적으로 px나 rem 이라는 단위로 나타내어 지정해주고, 선 스타일에서는 제가 대표적.. 더보기 [HTML / CSS] 이미지 불러오기 & 크기 조절 & 사진 파일이 없을 경우 작성하는 코드는 ?? HTML 이미지를 불러오기 위한 속성 값은 src 코드를 사용하며, 링크로 불러올 수 없을 시 대체 태그는 alt로 표현됩니다. 또한 HTML CSS 이미지 너비를 조절하는 속성 값은 width로 표현되고, 높이는 height 를 사용하여 나타냅니다. 이제부터는 예시를 통해서 살펴보겠습니다. 1. HTML 이미지 불러오는 속성 값 src 이 부분은 본문 내용입니다. 이미지를 삽입하는 방법은 태그 안에 더보기 [ HTML ]링크 텍스트 클릭 전/ 후, 커서 밑 색깔 변화 & 링크 부분 밑줄 없애려면 ???(HTML CSS 링크 컬러 속성) html을 작성할 때 링크 클릭 텍스트 전, 후 컬러 그리고 마우스를 링크 부분에 올렸을 때와 클릭했을 때 변화하는 코드는 각각 이나 css 부분에 코드를 a: 를 입력하고 각각 link, visited, hover, active 를 입력해주면 됩니다. 또한, 링크 밑줄이 생기는 것을 없애려면 text-decoration: none 을 입력해주면 됩니다. 밑에서 예시로 살펴보시겠습니다. 1. a: link 아직 방문한 적 없는 페이지 링크 텍스트 색상을 변경하는 코드입니다. a:link{color: orangered; text-decoration: none;} 'a: link'를 스타일 태그에 넣게 되면 아직 한번도 들어가지 않은 링크 클릭 텍스트가 orangered 색상으로 변하는 것을 볼 수 있습니다.. 더보기 [ HTML ] 링크를 클릭했을 때 새 창이나, 새 탭에서 열리게 하려면 어떤 코드를 작성해야 하나요?? 기본 링크에서 새 창과 새 탭이 열리게 하기 위해서는 HTML 링크 코드 부분에 target blank 코드를 넣어주면, 현재 탭은 그대로 있고 새 탭에서 클릭한 링크로 연결됩니다. 기존 창을 그대로 유지하고 싶은 경우 이 코드를 사용해주면 효율적으로 페이지를 관리할 수 있습니다. 코드 예시로 살펴보겠습니다. 1. 현재 페이지를 없애고 링크 이동 새로운 링크 이동 링크 코드의 수정 없이 그대로 이 코드를 사용한다면, 현재 페이지는 남기지 않고 링크로 이동하게 됩니다. 검색 페이지가 더 이상 필요없는 경우 움직임을 최소화 할 수 있어 효율적이지만, 검색 창을 띄워두고 여러 페이지로 이동할 경우 불편합니다. 2. 현재 페이지를 남긴 채로 링크 이동 새로운 링크 이동 body 태그 안 태그 안을 보면 targ.. 더보기 html 주석( 코맨트 : Comment) 과 인용( Quotation ) 은 어떻게 작성해야하나요 ??? html에서 타인이 내 코드를 읽을 때가 있거나, 내가 수정한 부분이 있을 때 주석인 코맨트(comment)를 활용하게 됩니다. 그리고 html body 태그 중에서 전문가의 말이나, 타인의 의견을 가져와서 사용할 경우 쓰는 것이 인용(Quotation) 입니다. 1. html에서 주석 사용하기 글 작성 부분 html에서 코맨트(comment) 부분은 ' ' 을 통해서 작성이 가능합니다. 2. html에서 기본 인용 사용하기 원래 내용 부분 q를 통해서 기본 인용구 활용. 그 이후 내용 부분입니다. 기본 인용구의 경우 기본 인용구 내용 을 통해서 활용이 가능합니다. 3. html에서 블록 인용 사용하기 기본 내용부분 입니다, 블록 인용구 부분입니다. 그 후의 내용은 자연스럽게 이어가면 됩니다. 블록 인용.. 더보기 [ html / css ] 텍스트 취소선 , 밑줄 , 윗줄 그리고 텍스트 배경색은 어떻게 해야할까요 ??? html에서 취소선과 밑줄( underline )과 윗줄( overline ) 만드는 방법, 그리고 글자색과 글자 배경색 ( background color)을 변경하고자 style 태그에서 그 해당 부분을 지정해주면 됩니다. css 파일과 연동하는 것도 한 방법이고, 그렇게 하지 않아도 html 파일 내에서 지정이 가능합니다. 1. 글자색 변경하기 글자색은 style="color:원하는색상" 을 입력해주면 출력 창에서 변하는 것을 볼 수 있습니다. html으로 글씨 색깔 바꾸는 방법 내용 부분은 이렇게 입력이 가능합니다. 2. 글자 배경색 변경하기 글자 배경색은 style="background-color: 원하는색상" 을 입력해주면 출력 창에서 변하는 것을 볼 수 있습니다. 제목 부분 내용 부분 위에서 .. 더보기 HTML 과 CSS 에서 문단 단락 띄어쓰기 ( 엔터 키 )하는 방법이 어떻게 되나요 ??? 안녕하세요 오늘 포스팅에서는 HTML 과 CSS에서 문단 단락의 띄어쓰기 하는 방법에 대해서 알아보도록 하겠습니다. 우리가 사용하는 HTML 입력창 편집기에서 엔터를 직접 입력해주는 경우와, 결과 창에 나오는 결과랑 완전히 다른 경우가 있습니다. 그 중 가장 첫번째가 이 엔터키 인데요 단락 띄어쓰기는 우리가 입력해주는 키를 컴퓨터가 입력받지 못하게 됩니다. 그렇기에 당연히, 출력 창에서도 그 결과 값을 입력 받지 못하여 띄어쓰기가 안 되는 모습을 볼 수 있죠. 이러한 경우를 예를 들어, 설명 하겠습니다. 위의 예시처럼 VSCODE 와 같은 입력창에서 코드를 입력해주었는데 제대로 인식이 단락 띄어쓰기 (엔터 키) 가 입력이 안 되는 것을 확인할 수 있습니다. 아까 입력창의 결과 값으로 지금 붙여넣은 사진을.. 더보기 이전 1 다음
