이 매뉴얼은 두 링크 사이에 공간을 만드는 절차를 알려줄 것입니다.
시작하자!
HTML 및 CSS에서 두 링크 사이에 공간을 제공하는 방법은 무엇입니까?
두 링크 사이에 공간을 제공하려면 먼저 HTML 파일에 필요한 링크를 추가합니다.
1단계: HTML에 링크 추가
HTML에서는
HTML
< div >< ㅏ href = 'https://linuxhint.com/create-html-file/' > HTML 파일을 만드는 방법? < / ㅏ >
< ㅏ href = “https://linuxhint.com/edit-html-file/” > HTML 파일을 편집하는 방법? < / ㅏ >
< / div >
다음 이미지는 링크가 성공적으로 추가되었음을 보여줍니다.
2단계: Div 및 링크 스타일 지정
이 단계에서 '를 사용하여 div와 링크의 스타일을 지정합니다. div '. 패딩을 ' 40픽셀 '로 설정하고 링크의 글꼴 크기를 ' 더 큰 ', div의 높이는 ' 150픽셀 '를 선택하고 background 속성을 사용하고 div의 색상을 ' 검은색 '. 그런 다음 테두리 너비를 ' 5픽셀 ', 스타일 ' 파선 '로 지정하고 '로 색상을 지정합니다. RGB(251, 255, 0) '.
CSS
div {심 : 40픽셀 ;
글꼴 크기 : 더 큰 ;
키 : 150픽셀 ;
배경 : 검은색 ;
국경 : 5픽셀 파선 RGB ( 251 , 255 , 0 ) ;
}
위의 코드를 사용하면 다음과 같은 출력을 얻을 수 있습니다. 보시다시피 div와 링크 모두 스타일이 지정됩니다.
3단계: 두 링크 사이에 수평으로 공간 제공
HTML과 CSS를 사용하여 두 링크 사이에 수평으로 공간을 줄 수 있습니다. 여기에서는 두 가지 방법을 하나씩 설명합니다.
방법 1: HTML 사용
외부 CSS를 작성하지 않고 링크 사이에 공간을 제공하려면 ' ” 공간을 만들고자 하는 HTML에서. ' '는 끊기지 않는 공간을 의미합니다. HTML 파일에서 하나의 를 추가하는 것은 하나의 공백을 의미합니다. 더 많은 공간을 제공하려면 필요한 공간 수에 따라 를 수동으로 추가하는 것은 바람직하지 않습니다.
설명된 개념을 이해하기 위해 예제로 이동하겠습니다!
예시
여기에 4번 씁니다.” '를 사용하여 두 번째 링크가 네 개의 공백 뒤에 표시되도록 첫 번째 링크 뒤에 공백을 만듭니다.
HTML
< div >< ㅏ href = 'https://linuxhint.com/create-html-file/' > HTML 파일을 만드는 방법? < / ㅏ >
HTML 파일을 수정하는 방법
보시다시피 첫 번째 링크의 오른쪽에 공간이 생성됩니다.
방법 2: CSS 사용
CSS에서는 ' 여백 오른쪽 ” 속성을 사용하여 두 링크 사이에 공백을 제공합니다. ' 여백 오른쪽 '속성은 요소의 오른쪽에서 공백을 추가하는 데 활용됩니다. 음수 값을 설정할 수도 있습니다.
통사론
margin-right 속성의 구문은 다음과 같습니다.
여백 오른쪽 : 값'대신에 값 ', 요소의 오른쪽에서 여백을 설정합니다. 예제를 계속하겠습니다.
예시
여기서 우리는 ' ㅏ '를 클릭하여 HTML에서 만든 링크에 액세스합니다. 다음으로 margin-right 속성의 값을 “ 50픽셀 ':
ㅏ {여백 오른쪽 : 50픽셀 ;
}
공간은 아래에서 볼 수 있는 첫 번째 링크의 오른쪽에서 생성됩니다.
4단계: 두 링크 사이에 수직으로 공간을 둡니다.
두 링크 사이에 수직 공간을 제공하려면 먼저 링크를 수직 형태로 정렬합니다. '를 사용하여 수행됩니다. 차단하다 '의 값 ' 표시하다 ' 속성을 선택한 다음 ' 줄 높이 ” 속성을 사용하여 두 링크 라인 사이에 공간을 제공합니다.
예시:
여기서는 display 속성의 값을 ' 차단하다 '를 사용하여 링크를 세로로 정렬합니다. 그런 다음 line-height 속성 값을 “ 80픽셀 ':
ㅏ {표시하다 : 차단하다 ;
줄 높이 : 80픽셀 ;
}
보시다시피 공간은 line-height 속성을 사용하여 생성됩니다.
그게 다야! HTML과 CSS에서 두 링크 사이에 공간을 주는 방법을 설명했습니다.
결론
' ', ' 여백 오른쪽 ', 그리고 ' 줄 높이 ” CSS의 속성은 두 링크 사이에 수평 및 수직 공간을 제공하는 데 사용됩니다. 이를 이용하여 링크의 좌우 간격을 조절할 수 있습니다. 이 기사에서는 두 가지 다른 방법을 사용하여 두 링크 사이에 공간을 제공하는 절차를 설명하고 관련 예제를 제공했습니다.