분류 전체보기62

• 

  출근 6일차, 본격적인 일정부터 다른 이야기 오늘로 출근 6일차가 되는 날이었습니다. 출근 첫날 부터 금요일까지는 계속해서 기존에 만들어졌던 포토샵 시안으로 웹페이지를 제작했었는데, 오전에는 업무가 주어진다고 하여 대기를 하였는데 아직 웹페이지 시안이 나오지 않아서 일단 대기를 하게 되었는데, 이 시간을 이용하여 사내에서 사용하는 규칙들을(?) 정리를 하였습니다. 그리고 파견 업무가 "주"이기 때문에 필수로 해야되는 부분들도 있었는데, 바로 개인정보보호 관련 교육도 필수인데, 이 부분도 같이 진행하였습니다. 1년에 한 번씩 진행하게 된다고 하니 잘 체크해보는 것도 괜찮습니다. 개인정보보호 교육 종료 후에 이제 자주 쓰이는 부터 관련 태그 등을 자주 사용하기 때문에 또 정리를 하였습니다. 이제 업무를 계속하면서 자주 사용하는 tag, class na.. 웹 퍼블리셔 일기 2021. 4. 13.

• 

  출근 둘째날, 그래도 쉽지 않았다. (와악, table 태그!) 오늘은 table tag를 활용한 게시판을 마크업 하였습니다. 매번 Header쪽만 만들고, 메인페이지에만 힘을 썼었지만, 지금 제 포스팅을 보시고 취업 준비를 하신다면 꼭! 서브페이지에도 힘을 쏟기를 바랍니다. 특히 신입에게는 말이죠. 신입에게는 대단한 것을 맡기지를 않습니다. (사수가 없는 퍼블리셔로 취업했다면 상황은 다르겠지만..) 같이 입사한 동기도 이번에 table 태그를 만들면서 와 만 쓰고 바로 만들었는데, 접근성 관련해서 보완을 해야되서 태그를 포함했습니다. 쉽게 후딱 만들고 하는 것은 접근성과는 거리가 참 멀기 때문에 어렵더라도 작성해야되는 부분은 딱! 딱! 작성하는 것이 좋습니다. 을 통해서 특정 셀의 %를 지정해주는 것도 써보면서 알게 되었습니다. 주말에는 table 태그를 이용하여 .. 웹 퍼블리셔 일기 2021. 4. 7.

• 드디어 취업 뽀개기, 취업 성공: 첫 출근 두둥! 수료한 이후에 3개월 만에 어렵게 취업을 했습니다. 필자는 30대 중반, 적지 않은 나이라 굉장히 이 계열 쪽으로 계속해서 취업을 해야될지 고민하고 있던 찰라에 취업 인터뷰 관련으로 연락이 왔습니다. 일단 신입인 것을 감안하고, 기술적인 부분보다는 배울 수 있는 점에 많이 치중하는 것 같아서 내심 기뻤습니다. 그리고 이제 본격적으로 업무를 하게 되었습니다. 첫날은 서로들 소개하는 것보다는 본격적으로 나의 실력을(?) 검증하는 정도가 되었습니다. 이런 부분이 입사 취소가 되는 부분은 아니라고 했지만, 매번 작성했던 코드들도 버벅대기 시작했고, PSD 파일을 계속 드래그하면서 잠시 몇 분 다른 정신세계로 간 것은 어쩔 수 없나봅니다. - 서브라임 텍스트 설치 - PSD 시안으로 마크업 GNB가 없는 로그인 .. 웹 퍼블리셔 일기 2021. 4. 6.

• 

  [SASS - SCSS] 2-4. 데이터 타입 4. 데이터타입 SASS Script는 7가지의 데이터 타입을 지원합니다. 데이터 타입은 아래와 같습니다. 1. 숫자형: number (ex: 1.2, 100, 150px) 2. 문자열: (ex: "SASS", 'SASS', SASS) 3. Color (ex: red, #999999, rgba(255, 255, 0, 0.5)) 4. boolean (ex: true, false) 5. null (ex: null) 6. list: (ex: 1.5em 1em 0 2em, Noto Sans Arial, sans-serif) 7. maps: (ex: key1: value1, key2: value2) 그중에서도 데이터 타입에서 대표적인 내용들을 정리하였습니다. 1) 문자열 문자열은 SassScript에서는 일반 텍.. SCSS-SASS 2021. 2. 21.

• 

  [SASS - SCSS] 2-3. 변수 $ 기호 내용정리 3. 변수 $ 기호 초반에 SASS 기초 정리를 하면서 변수 $ 기호를 사용한다고 작성 하였습니다. 가장 중요한 변수 처리이고, 변수를 잘 처리하면 더 용이하게 코드 작성을 할 수 있습니다. 변수에는 $ 기호를 사용합니다. SASS에서도 지역변수와 전역변수가 존재합니다. 전역변수는 선택자 외부에 선언하는 방법과, 지역변수 부분에서 !global이라고 지정을 하게 되면 전역변수가 선언이 됩니다. $main-width는 전역변수로 선언이 되었습니다. 나중에 프로젝트로 돌입하게 되면 별도로 분리하는 것이 용이합니다. 별도의 파일을 만들어서 호출해서 부르는 형식으로 말이죠. #main에서 $width: 10px !global; 이렇게 !global을 작성하게 되면서 $width는 전역변수가 됩니다. #sideb.. SCSS-SASS 2021. 2. 20.

• 

  [SASS - SCSS] 2-2. 주석 내용정리 2. 주석 SASS 주석은 두 종류가 있습니다. 블록 주석과 인라인 주석이 있는데 아래와 같이 정리해봤습니다. 1. 블록 주석 /* comment */ -> 기존 CSS와 동일, 컴파일 되었을 때, CSS파일에 표기 1번 블럭 주석의 경우는 CSS로 컴파일을 하게 되면 출력이 됩니다. 단 압축 Compressed의 경우에는 /*! comment */ 이런식으로 ! 느낌표를 앞에 추가를 해줘야 주석이 정상적으로 표기가 됩니다. 중첩nested, 확장expanded, 축약compact의 경우 ! 느낌표없이도 주석이 모두 출력이 됩니다. 2. 인라인 주석 // comment -> 컴파일 되었을 때 표기 안됨, SASS에서만 주석 표기 하지만 2번 인라인 주석의 경우에는 CSS로 출력을 해도 나오지 않기 때문에.. SCSS-SASS 2021. 2. 19.

• 

  [SASS - SCSS] 2-1. CSS 확장 내용정리 1. CSS 확장 중첩이란, 하나의 선택자의 하위 선택자 또는 자식 선택자가 있는 경우 중첩을 이용하면 많은 코딩을 하지 않고 편리하게 각 선택자에 속성을 지정해 줄 수 있습니다. 사이트가 복잡해지면서 하위 - 자식 선택자들이 많아지게 됩니다. 중첩을 이용하면 각 선택자들은 한 번만 입력하면 모든 것이 해결되는 편리한 기능입니다. CSS 확장에는 중첩만이 아닌, 태그 선택자와 연계된 클래스, 아이디 선택자끼리 쉽게 묶어주는 기능도 있습니다. 수도 선택자 pseudo selector를 지정할 경우에 편리합니다. 수도 선택자는 :hover, :active, :link와 같은 하이퍼링크에 효과를 주는 것부터 :first-child, :last-child, :nth-child와 같이 li 또는 tr, td 태그.. SCSS-SASS 2021. 2. 18.

• 

  [SASS - SCSS] 1-5. 연산자 내용 정리 6. 연산자 SASS는 간단한 사칙연산이 가능합니다. +, -, *, / 그리고 %까지 처리가 가능합니다. 연산 기능은 CSS를 이용하여 레이아웃을 작업할 때 아주 편리하게 사용 가능합니다. 색상을 섞는 기능도 가능하고, 폰트 사이즈를 조정 길이와 높이 등 조정할 때도 사용이 가능합니다. 웹사이트는 고정폭으로 사이트를 만드는 경우도 있고, 최근에는 반응형이라는 기술을 사용하여 폭 크기를 유동적으로 변경하는 경우가 많습니다. 웹 브라우저의 크기가 커지거나 작아질 경우 콘텐츠 부분과 aside의 크기 또한 유동적으로 크기를 줄일 수 있도록 처리해야 합니다. 기존 CSS로 기재했을 경우에는 계산기를 두고 하지 않아도 연산자를 사용해서 간단하게 작성하면서 %나 고정 px를 이용해서 처리할 수 있습니다. SASS.. SCSS-SASS 2021. 2. 18.

• [SASS - SCSS] 1-4. 확장 - 상속 내용 정리 5. 확장 / 상속 SASS에서는 확장과 상속을 통해 편리하고 비슷한 코드를 통합해 줄 수 있습니다. CSS의 속성은 위에서 아래로 적용됩니다. 동일한 속성값을 여러 번 변경하더라도, 결과값은 가장 마지막에 있는 값으로 적용됩니다. 동일한 선택자의 속성값을 여러 번 변경하더라도 top-down 방식에 의해 가장 마지막에 있는 값의 영향을 받습니다. 그러므로 최종적으로 margin: 15px로 변경되는 것입니다. 확장과 상속을 이해하기 위해서는 SASS에 @extend 코드를 이용하면 됩니다. .message 선택자를 이용하여 작은 박스를 만들 수 있는 CSS 코드를 작성하고, 3개의 동일한 작은 박스 success, error, popup을 추가하였습니다. 바로 확장코드인 @extend .message .. SCSS-SASS 2021. 2. 18.

• 

  [SASS - SCSS] 1-3. 부분화-불러오기와 믹스인 내용 정리 3. 부분화 / 불러오기 SASS로 작업을 하다 보면 문장이 상당히 길어지고 복잡하게 되어 문장을 분리를 해야 조금 편하게 작업이 가능합니다. 문장을 분리하는 과정은 부분화라고 합니다. 부분적으로 쪼갠 SASS 문장을 하나의 문장에 불러오기를 한 후 컴파일 과정을 거치게 되면 하나의 CSS 파일로 변환이 됩니다. 부분화를 할 때 가장 중요한 것은 파일 이름이고, 반드시 부분화를 하는 파일의 이름은 _언더바로 시작이 되어야 합니다. (ex: _style(O) / style(부분화 X) CSS 파일 내부에 불러오기를 하는 방법이 있는데, 이 경우에도 import를 이용해서 처리하게 됩니다. - css: @import url(style.css); - SASS: @import 'style'; CSS import.. SCSS-SASS 2021. 2. 18.

• 

  [SASS - SCSS] 1-2. 변수와 중첩 내용 정리 1. 변수 SASS에서도 반복적으로 많이 사용되는 부분입니다. 예를 들어 font 모양이나 색상, 스타일 등을 변수로 지정해 놓고 반복적으로 사용되는 값을 변수로 변경해주면 간단하게 CSS를 제어할 수 있습니다. $font-stack: "Noto-sans", sans-serif; $base-color: red; body { font: 100% $font-stack; color: $base-color; } $font-stack에는 Noto-sans, sans-serif 글꼴 변수를 부여하고, $base-color에는 쉽게 red 색상으로 지정하였습니다. 위의 내용을 컴파일을 하면 아래와 같은 내용으로 css파일을 내용으로 컴파일이 됩니다. body{ font:100% "Noto-sans",sans-seri.. SCSS-SASS 2021. 2. 17.

• 

  [SASS - SCSS] 1-1. SASS 기초 (문법 구조) 현재 SASS를 공부하면서 내용을 정리하는 시간을 가져봤습니다. SASS는 컴파일러 프로그램을 설치한 후에 진행을 하였는데, 저는 Scout-App을 이용하여 SASS를 습득하고 있습니다. 1. SASS의 기초 일단, SASS(Syntacically Awesome Style Sheet)는 확장자가 .sass와 .scss 두 종류가 있습니다. 이 두 파일의 차이점은 중괄호 {}와 ;을 사용하는 부분에서 차이가 납니다. - SCSS 문법 구조 - SASS 문법 구조 ▶ 중괄호와 세미콜론의 유무 이외에는 차이점이 없습니다. 결과물은 동일합니다. 위의 코드 처럼 변수를 선언해서 중복되는 코드를 줄이고, 반복적으로 사용하면서 편리하게 처리할 수 있기 때문에 필요한 기술입니다. SCSS 문법으로 프로젝트를 작성하면.. SCSS-SASS 2021. 2. 16.