'분류 전체보기' 카테고리의 글 목록 (15 Page) :: 놓치기 쉬운 정보 저장
728x90
SMALL

CSS reset

CSS Reset은 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 초기화하는 전략이다. 구글링 해보면 리셋 방법도 굉장히 다양하게 나와 있는 걸 알 수 있는데, 그 중 그나마 가장 유명한 건 Eric Meyer라는 개발자가 만들어놓은 CSS reset이다. 그런데 가장 최근 업데이트가 2011년에 있었던 만큼 오래된 자료이기도 하고, 유용한 스타일까지도 초기화해서 비효율을 초래할 수 있다는 비판이 있다.

그래서 최근에는 필요한 부분만 초기화를 하여 사용하기도 하거나 CSS Normalize라는 기법을 사용하는 전략이 생겨났다.

CSS Normalize

CSS Normalizes는 브라우저 간 유저 에이전트 스타일의 오차를 줄이고, 버그만 줄이는 방향으로 스타일을 재지정하는 거다. CSS Reset는 기본값을 다 싸그리 엎는 데 반해 CSS Normalize는 기본값들을 최대한 보존하고 수정을 최소화한다.

normalize.css 는 오픈 소스이기 때문에 이 코드를 파일로 저장해 HTML에 연결해 사용하면 된다.

*** a, body, ul, li, ol, li, h1, h2, h3, h4, h5, h6 은 사용하기전에 Normalize 해야 한다.

728x90
LIST
저작자표시 비영리 변경금지

'programming > Front-end' 카테고리의 다른 글

[Front-end] (nth-child_v2) 개념  (0) 2022.06.23
[Front-end] (nth-child) 개념  (0) 2022.06.23
[Front-end] (margin, padding) 개념  (0) 2022.06.22
[Front-end] (실습 예제) 이미지 6개 3*2로 정렬하기  (0) 2022.06.22
[Front-end] (실습 예제) 홈페이지 상단 메뉴바 구현  (0) 2022.06.22
728x90
SMALL

프로젝트를 개발할 때에는 과연 아래의 10가지가 충족을 시킬 수 있는 것들인지, 충족할 수 있도록 부단히 고민하고 관리하는 자가진단이 필요하다.

그래야만이 제대로 된 프로젝트가 개발될 수 있다.

 

  1. - 실제 서비스를 공개적으로 배포하고 운영해보는 경험을 해 보았다
  2. - 유저의 피드백에 따라 성능/사용성을 개선하고 신규 기능을 추가 해보았다
  3. - 발견되는 버그와 개선사항을 정리 하고 쌓인 이슈들을 체계적으로 관리 해 보았다
  4. - 코드를 지속적으로 리펙토링하고 디자인패턴을 적용 해 보았다
  5. - 위의 시도에서 더 좋은 설계와 더 빠른 개발 사이의 트레이드오프를 고민 해보았다
  6. - 반복되는 수정과 배포에 수반되는 작업들을 자동화 해보았다
  7. - 언어나 프레임워크의 기능만으로 구현 할 수 없는 것들을 직접 구현 해보았다
  8. - 내가 사용한 라이브러리나 프레임워크의 문제점이나 한계를 느끼고 개선 해보았다
  9. - 코드나 제품의 퀄리티를 유지하기 위한 분석툴이나 테스트툴을 도입 해보았다
  10. - 타인과의 협업 을 효율적으로 하기 위한 고민을 해보았다

 

채용시 눈에 띄는 단어들은 꼭 알아야겠다. 별도로 용어 정리를 통해서..
- 디자인 패턴, 아키텍쳐, TDD, CI/CD, 파이프라이닝, 자동화, 애자일, 협업, 이슈트래킹, 버전관리, 배포, 운영, 클라우드, 컨테이너, Log 분석, 제품화 경험, 트래픽

 

/* 트레이드오프 : 트레이드오프 또는 상충 관계는 다른 측면에서 이득을 얻으면서 집합 또는 디자인의 품질, 양, 속성을 없애거나 잃어버리는 일이 수반되는 상황적 결정이다. 즉, 하나가 증가하면 다른 하나는 무조건 감소한다는 것을 뜻

728x90
LIST
저작자표시 비영리 변경금지
728x90
SMALL

스파르타코딩클럽의 도움을 받긴 하였지만, 처음으로 나만의 개인 프로필 링크를 만들어보았다.

신기하기도 하고 재미도 있었다.

앞으로 프론트엔드 개발자가 되기 위해 더 노력해서 더 나은 프로젝트를 구현해보겠다.

 

링크 : https://yeomboyeon.github.io/Javascript_project_profile/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="염보연 - 86년 12월 21일">
    <meta property="og:description" content="프론트엔드 개발자">
    <meta property="og:image" content="캡처.PNG">
    <title>프론트엔드 개발자 염보연</title>
    <style>
        @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
        * {
            font-family: "Pretendard",serif;
        }
            body {
                background-color: blueviolet;
            }
            .profile {
                width: 100px;
                height: 100px;

                background-color: pink;
                border-radius: 100px;

                border: 2px solid white;

                background-image: url(캡처.PNG);
                background-position: center;
                background-size: cover;

            }
            .main {
                color: white;
                font-size: 20px;

                margin-top: 15px;
                margin-bottom: 0px;
            }
            .sub {
                color: white;
                font-size: 15px;

                margin-top: 5px;
                margin-bottom: 30px;
            }
            .wrap {
                width: 300px;
                margin: 50px auto 0px auto;

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .wrap > a {
                width: 300px;
                height: 50px;

                background-color: white;
                border-radius: 8px;

                margin-bottom: 10px;

                font-size: 16px;
                font-weight: bold;
                color: blueviolet;

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                text-decoration: none;

                box-shadow: 2px 2px 2px 2px black;
            }
            .wrap > a:hover{
                background-color:#f2f2f2;
                font-size: 18px;
            }
    </style>
</head>
<body>
    <div class="wrap">
        <div class ="profile"></div>
        <h1 class ="main">프론트엔드 개발자</h1>
        <p class ="sub">염보연</p>
        <a target="_blank" href="https://yeomboyeon.tistory.com/">개인 블로그(티스토리)</a>
        <a target="_blank" href="https://www.notion.so/537bd427f44743b5bc10a6e8a6b396a3/">Notion 노트</a>
        <a target="_blank" href="https://codepen.io/JungSungHun/full/bGLQGNe/">Front-end 수업</a>
        <a target="_blank" href="https://codepen.io/woooyoung/full/popONZJ">Java 수업(1)</a>
        <a target="_blank" href="https://codepen.io/woooyoung/full/VwQpxvE">Java 수업(2)</a>
        <a target="_blank" href="https://github.com/">github</a>
        <a target="_blank" href="https://codepen.io/your-work/">codepen</a>
        <a target="_blank" href="https://programmers.co.kr/?utm_source=google&utm_medium=cpc&utm_campaign=brand_prgms_pc&gclid=Cj0KCQjwxtSSBhDYARIsAEn0thTMyMj0XsgE-F1fh98Cmth-KGp4IrWX8h2-39d8D-ASusz9TMHu-1QaArz9EALw_wcB">프로그래머스</a>
        <a target="_blank" href="https://studio.code.org/users/sign_in">Code.org</a>
        <a target="_blank" href="https://www.typingclub.com/sportal/">타이핑클럽(영타연습)</a>
    </div>
</body>
</html>
728x90
LIST
저작자표시 비영리 변경금지
728x90
SMALL

margin : CSS 약식 속성은 요소 의 네 면 모두에 여백 영역 을 설정합니다.

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/margin

padding : CSS 약식 속성 은 한번에 요소의 네 면에 패딩 영역 을 설정합니다 .

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/padding

 

728x90
LIST
저작자표시 비영리 변경금지

'programming > Front-end' 카테고리의 다른 글

[Front-end] (nth-child) 개념  (0) 2022.06.23
[Front-end] (CSS reset, CSS Normalize) 개념  (0) 2022.06.23
[Front-end] (실습 예제) 이미지 6개 3*2로 정렬하기  (0) 2022.06.22
[Front-end] (실습 예제) 홈페이지 상단 메뉴바 구현  (0) 2022.06.22
[Front-end] (&nbsp;, br, text-decoration) 개념  (0) 2022.06.22
728x90
SMALL

이미지 6개 3*2로 정렬하기

 

느낀점 : 아직 display의 개념이 확실히 잡히지 않아서 여기저기에 display 속성을 넣어보면서 적용 여부를 확인하는 과정이 다소 많아서 시간이 좀 걸렸다.

 

참고로 background-color 를 줘서 간격이 실제로 벌어지는지 등을 시각화 하면서 하면 더 수월했다.

 

728x90
LIST
저작자표시 비영리 변경금지

'programming > Front-end' 카테고리의 다른 글

[Front-end] (CSS reset, CSS Normalize) 개념  (0) 2022.06.23
[Front-end] (margin, padding) 개념  (0) 2022.06.22
[Front-end] (실습 예제) 홈페이지 상단 메뉴바 구현  (0) 2022.06.22
[Front-end] (&nbsp;, br, text-decoration) 개념  (0) 2022.06.22
[Front-end] (emmpt 문법) 젠코딩  (0) 2022.06.22

+ Recent posts

티스토리툴바