본문 바로가기
TIL

2023.03.23_웹 퍼블리싱

minnjeong 2023. 3. 23. 15:02

 

 

스파르타 코딩클럽 웹 퍼블리싱 2주차 

 

  • dl,dt,dd
  • display:table
  • 가상요소 ::before, ::after
  • float

 

 

 

 

네비게이션 만들 때 주로 사용하는 방법


버튼들이 리스트 형태로 구성되어있다.

연관있는 리스트임을 구분해 주기 위해서 그룹을 ul로 묶고

ul 안에 서로 관련이 있는 것들을 li로 넣고 li 밑에 a 링크를 넣어서 만드는 구조로 많이 만든다.

 

 

 

 

 

dl, dt, dd


  • <dl> 태그는 용어의 정의와 내용 설명이 필요할 때 사용한다. definition list(정의 목록)
  • <dt> 태그는 제목을 의미한다. definition term(정의 용어)
  • <dd> 태그는 용어를 설명하는 데 사용한다. definition description(정의 설명)

 

 

<dl> 태그

정의가 필요한 목차를 설정할 때 사용한다. <dl> 태그는 단독으로 사용될 수 없다. <ol>,<ul> 태그가 <li>태그와 결합되어 사용하듯, 

<dl>태그는 <dt>,<dd>태그와 결합해서 사용한다.

 

<dl>
  <dt>정의</dt>
  <dd>정의를 설명합니다.</dd>
</dl>

 

 

<dt> 태그

용어의 정의를 나타낸다. 인라인 요소이기 때문에 <li>,<ul>,<p>등과 같은 블록 요소가 내부로 삽입될 수 없다.

 

 

<dd>태그

<dt>태그의 용어를 설명한다. 기본적으로 들여쓰기가 설정되어 있다. (40px)

<dd>태그는 블록 요소이기 때문에 블록 요소를 자유롭게 삽입할 수 있다.

 

 

<dd> 들여쓰기

간격을 왼쪽에 붙이고 싶다면 margin-left 값을 0px;로 조절하면 된다.

 

<dl>
  <dt>과일</dt>
  <dd style="margin-left:0px;">사과</dd> 
  <dd>딸기</dd>
  <dd style="margin-left:40px;">석류</dd> <!--속성값을 입력하지 않은 윗줄과 같은 위치에 있음-->
  <dd style="margin-left:60px;">수박</dd>
</dl>

 

 

 

 

 

 

<dt> <dd> 한줄 출력

 

<dt>태그에 float:left; 속성을 주면, <dt>태그가 <dd> 태그 앞으로 배치된다.

단, <dd> 태그의 데이터가 앞에 붙기 때문에 <dt> 태그에 margin-right 속성으로 간격을 조정하는 것이 좋다.

 

<html>
  <head>
    <style>
      dt{
        float:left;
        margin-right:15px;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>크리스마스</dt>
        <dd>12월 25일</dd>
      <dt>석가탄신일</dt>
        <dd>5월 12일</dd>
    </dl>
  </body>
</html>

 

 

 

 

참고 : https://dasima.xyz/html-dl-dt-dd-tags/

 

 

 

 

 

 

display:table-cell 과 block


상위에 있는 엘리먼트를 display:table 로 만들고 table 밑에 cell 형태로 요소를 정리하면 table에 있는 cell은 가로로 배치가 된다.

하위에서 display를 table-cell이 아니라 block으로 변경하면 아래로 정렬된다.

상위를 display:block로 변경하면 가로로 배치는 되지만 화면에서 균등하게 적용되진 않는다.

table-cell은 화면을 100% 균등하게 사용한다.

 

 

동일한 넓이와 간격을 가지고 있는 컨텐츠를 작업할 때 display:table 속성을 사용한다.

 

부모태그에 display:table 선언하고

자식태그에 display:table-cell 을 선언하면 컨텐츠의 갯수에 상관없이 동일한 간격으로 컨텐츠 영역을 가지게 된다.

 

 

 

 

 

 

 

webkit


 -webkit-box-shadow: 0 1px 3px 0 #0000001f;
  box-shadow: 0 1px 3px 0 #0000001f;

브라우저마다 실행되는 것이 다르기 때문에 사용 가능한 형태(-webkit-)을 첨부함

 

 

 

 

 

 

가상 요소 ::before, ::after 


#gnb .btn_more:after { /* after */
  display: inline-block;
  width: 11px;
  height: 7px;
  background-position: -83px -296px;
  background-repeat: no-repeat;
  vertical-align: top;
  content: "";
  margin-left: 7px;
  vertical-align: 2px;
}

 

 

 

가상 요소란?

가상클래스는 별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다.

가상 요소는 가상클래스처럼 선택자에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능하다.

 

 

 

대표적으로 사용되고 있는 가상요소

 

 

 

::before, ::after란?

 

::before  실제 내용 바로 앞에서 생성되는 자식요소

::after  실제 내용 바로 뒤에서 생성되는 자식요소

 

위를 쓸 땐 content라는 속성이 꼭 필요하다

 

 

 

content=”” 란?

 

::before, ::after와 함께 쓰이는 '가짜' 속성이다.

html 문서에 정보로 포함되지 않은 요소를 css에서 새롭게 생성시켜 준다.

 

content를 쓸 때 대표적으로 사용되는 속성들

 

 

gnb 구분 bar 넣기

 

html

<div id="content">
  <ul class="test">
    <li><a href="">login</a></li>
    <li><a href="">home</a></li>
    <li><a href="">sitemap</a></li>
  </ul>
</div>

css

.test li{float:left; margin-right:5px}
.test li::after{padding: left 5px;; content: "|";}
.test li:last-child::after{content: "";}

li에 after와 content를 사용하여 바(|)를 선언 후, last-child를 이용하여 마지막 li의 content를 재선언한다.

 

 

result

 

 

 

앞,뒤에 추가 정보를 넣기

 

html

<h1>오늘의 팀점 메뉴</h1>
<ul class="test">
  <li><a href="">일식</a></li>
  <li><a href="">중식</a></li>
  <li><a href="">한식</a></li>
  <li><a href="">대식</a></li>
  <li><a href="">구식</a></li>
</ul>

 

css

.test li{line-height: 3;}
.test li a::before{content:"진짜맛있는"; width: 40px;padding: 3px 6px;margin: 0 5px; border-radius:
4px; background: red; text-align: center;color: #fff;}

요소의 앞/뒤에 before 혹은 after를 선언합니다.. content=””에 넣고자 하는 문구를 입력한다.

 

 

result

 

 

 

 

 

 

 

 

 

 

float


div를 왼쪽으로 붙여서 정렬하는 방법은 float:left; 로 가능하다.

이미 자리를 차지하고 있는 블록 왼쪽에 붙어 정렬이 된다. (뒤에 있는 블록도 영향을 받는다)

 

 

레이아웃을 구성할 때 블록 라벨 요소를 가로 정렬하기 위해 사용된다.

 

 

 

float 속성

 

프로퍼티값 description
none 요소를 떠 있게 하지 않는다 (기본값)
right 요소를 오른쪽으로 이동시킨다
left 요소를 왼쪽으로 이동시킨다
clear float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정한다
inherit 부모의 속성을 상속 받는다

 

 

 

 

 

const $gnb = $("#gnb");

위처럼 변수로 등록을 해 주었을 경우에

$('ElementId').on('click',function (){
    alert (message: '안녕하세요')
})

// gnb를 그대로 사용 가능
$gnb.on('click',function (){
    alert (message: '안녕하세요')
})

 

 

 

 

delay : 3000

3초에 1번이라는 뜻이다.

js에서 1초를 1000으로 대체해주고 있다.

 

 

 

 

 

 

 

 

'TIL' 카테고리의 다른 글

2023.04.05_js_야구게임  (0) 2023.04.05
2023.04.04_js_일급 객체로서의 함수  (0) 2023.04.05
2023.03.22_position absolute  (0) 2023.03.21
2023.03.21_웹 퍼블리싱  (0) 2023.03.21
2023.03.20_웹 퍼블리싱  (0) 2023.03.20

'TIL' Related Articles

티스토리툴바