개발일지

개발일지 15일차

index.ys 2023. 3. 21. 21:58

웹퍼블리싱 html,css

HTML form태그

  • form태그는 정보를 입력 받을 수 있는 태그이다 input태그와 같이 쓰인다, 아이디, 비밀번호,검색어 입력에 자주 쓰인다
  • form태그는 <fieldset>,<legend>태그와 같이 쓰이는게 정석이다. 그렇지 않은 경우도 많다. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <form action="#" accept-charset="utf-8" name="information" method="get">
      <fieldset >
        <legend>개인정보</legend>
        <div>이름 : <input type="text" name="name" /></div>
        <div>나이 : <input type="text" name="age" /></div>
      </fieldset>
      <br />
      <fieldset >
        <legend>기타정보</legend>
        <div>취미 : <input type="text" name="hobby" /></div>
        <div>특기 : <input type="text" name="specialty" /></div>
      </fieldset>
    </form>
  </body>
</html>

CSS reset

- 퍼블리싱 작업전 html,css에 적용되어있는 기본속성들을 제거하고 적용하고자 하는 속성들이 적용될 수 있게 css를 리셋하고 작업하여야한다.

/* reset */
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
select,
table,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ol,
ul {
  list-style: none;
}

body,
button,
input,
select,
table,
textarea {
  font-size: 12px;
  line-height: 16px;
  color: #202020;
  font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕",
    helvetica, "Apple SD Gothic Neo", sans-serif;
}

jQuery로 함수 적용

- btn_more 함수에 클릭 이벤트를 적용한다.btn_more버튼을 클릭했을때 "더보기"가 활성화 되어있다면 "접기"를 반환하고

"접기"가 활성화 되어있다면 "더보기"를 출력하는 함수를 적용한다.

- swiper라는 슬라이드 라이브러리를 이용해 날씨를 아래서 위로 동작하는 슬라이드를 만들었다.

// 변수 선언
// gnd
const $gnb = $("#gnb");
// ly_service
const isLyService = $(".ly_service");
// btn_more
const $btn_more = $("#gnb .btn_more");

// 더보기 버튼 클릭시
// 더보기 => 접기, 접기 => 더보기 로 텍스트 변경
// ly_service 영역 보여주기
$btn_more.on("click", function () {
  const $moreBtn = $(this);
  const btnString = $moreBtn.text();
  if (btnString === "더보기") {
    $moreBtn.text("접기");
  } else {
    $moreBtn.text("더보기");
  }

  // ly_open 클래스로 더보기 영역 제어
  // gnb toggle class ly_open
  $gnb.toggleClass("ly_open");
});

// swpier 함수 실행

swiper("#NM_WEATHER .eg-flick-viewport", {
  mode: "autoVertical",
  delay: 3000,
});

CSS 개인연습

html,css 이용해 고규식 매니저님이 보내주신 이미지를 퍼블리싱했다

보내주신 이미지

까먹은 속성들도 많아서 많이 헤멨지만 기억나는 대로 대충 끼워맞춰보니 어쩌저지 짤 맞아 들어갔다.

완성된 페이지https://17jo.netlify.app/