본문 바로가기

달밤에 코딩하기

 (74)
Placeholder 스타일 적용하기 Placeholder의 스타일 변형은 표준이 아니다. 따라서 브라우저에서 제공하는 기능을 사용하여 Placeholder의 스타일을 변경할 수 있다. 문제 발생 Placeholder의 스타일 변형은 표준이 아니기 때문에 placeholder의 스타일을 표준 css로 변경 불가능하다. HTML CSS /*CSS 입력하지 않음*/ 문제 해결 각 브라우저에서 제공하는 placeholder 변형 기능을 활용하여 placeholder의 스타일을 변경한다. 이때 각 브라우저의 접두사를 붙여 스타일을 정의해야 하며, 오페라는 placeholder의 스타일 변형을 지원하지 않는다. 브라우저 별 접두사 크롬 : Webkit 익스플로러, 엣지 : ms 파이어폭스 : moz 오페라 : o HTML CSS .input--tex..
float 부모 높이 값 문제 해결하기 Float는 '뜨다'라는 의미가 있다. 이와 같이 float를 설정하면 해당 요소가 동동 뜨기 때문에, 부모가 요소의 높이를 파악하지 못하는 경우에 아래와 같이 해결할 수 있다. 문제 발생 Float를 자식 요소에 사용 시, 부모 요소가 자식의 높이값을 인식하지 못함. HTML CSS .container{ border: 8px solid red; } .container div{ float: left; width: 200px; height: 200px; border: 8px solid blue; } 문제 해결 clearfix라는 클래서에 float요소를 지우는 clear를 넣어 부모 요소에 적용한다. HTML CSS .clearfix::after{ content: ""; clear: both; displa..
#4-Bootstrap 활용 웹 에디터 사용하기 Bootstrap에서 사용할 수 있는 웹 에디터가 있다. 사용법은 getting started 메뉴를 클릭하여 확인할 수 있다. https://summernote.org/ Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org Bootstrap 템플릿 사용하기 아래 사이트에 접속하여 유료 bootstrap 템플릿을 사용할 수 있다. https://themeforest.net/?gclid=CjwKCAjwruSHBhAtEiwA_q..
#3-Bootstrap 레이아웃 및 컴포넌트 사용 레이아웃 시작하기 1줄에는 12개의 컬럼이 있다는 것이 부트스트랩의 규칙이다. 기본 구조 container로 가로 한줄을 묶어준다. 하위에 "col-화면사이즈-숫자" 형태의 class를 가진 요소를 넣는다. col은 colmn을 의미한다. sm은 화면 사이즈를 정의한다. xs : 768px보다 작을때 sm : 768px보다 클때 md : 970px보다 클때 lg : 1170px보다 클때 숫자는 몇개의 컬럼을 포함할 것인지를 선언하는 것이다. 1줄에 컬럼이 12개가 들어가기 때문에 숫자의 합이 12가 되어야 한다. 컬럼3개 예시 첫번째 두번째 세번째 컬럼12개 예시 1 2 3 4 5 6 7 8 9 10 11 12 해상도 사이즈 별 컬럼 설정 예시 1 2 3 4 그 외 컴포넌트 사용하기 아래 사이트에서 컴포..
#2-Bootstrap 설치 VS code에서 부트스트랩을 설치하는 방법을 알아보자. 링크로 설치하기 1. Bootstrap 사이트 > 시작하기 화면 접속한다. http://bootstrapk.com/getting-started/ 시작하기 · 부트스트랩 부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치 bootstrapk.com 2. 부트스트랩 CDN 내용을 복사한다. 4. head 영역에 복사한 내용을 붙여넣는다. 의존성 문제로 순서는 아래와 같이 적용한다. 파일로 연결하기 1. 원하는 버전 링크 주소로 이동하여 다른이름으로 저장한다. 2. 다운받은 css파일을 html 파일이 있는 폴..
#1-Bootstrap이란? Bootstrap을 알기 전, 라이브러리와 프레임 워크를 알아보자. 라이브러리란? 위키 백과에서는 라이브러리를 이렇게 정의한다. 라이브러리(영어: library)는 주로 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. 여기에는 구성 데이터, 문서, 도움말 자료, 메시지 틀, 미리 작성된 코드, 서브루틴(함수), 클래스, 값, 자료형 사양을 포함할 수 있다. OS/360 및 이후 세대에서는 파티션 데이터 세트로 부른다. 소프트웨어를 개발하기 쉽게 기능을 제공하는 도구라고 할 수 있다. 내가 참고한 블로그에서는 이를 톱, 망치, 삽 같은 연장으로 묘사했다. 어떤 도구를 사용하든, 사용자가 원하는 것을 만들어 주는데 집중하는 것이 라이브러리라고 한다. 프레임 워크란? 위키 백과에서..
#25 - 반복문 (@while) @while 조건이 false가 될 때 까지 내용을 반복한다. false가 되지 않으면 무한 루프에 빠질 수 있다. SCSS 기본 구조 @while 조건{ /* 반복 내용 */ } SCSS $i : 3; @while $i > 0{ .class-#{$i} { width : 10px * $i; } $i : $i - 1; } Compile 된 CSS .class-3{ width : 30px; } .class-2{ width : 20px; } .class-1{ width : 10px; }
#24 - 반복문 (@each) @each list data와 Map data를 반복할 때 사용한다. #list / Map Data 설명 보기 #3 - Sass & SCSS 주석과 데이터의 종류 #3 - Sass & SCSS 주석과 데이터의 종류 주석 ( Comment ) Sass와 SCSS는 주석 사용법에서 차이가 있다. Sass 주석 /* 각 줄에 별표를 붙여야 하며 * 별의 라인을 맞춰주어야 * 정상 동작 합니다. */ SCSS 주석 //해당 주석은 컴파일 되지 않습니다. rosakim90.tistory.com List Data와 @each SCSS 기본 구조 @each $변수 in 데이터{ /* 반복 내용 */ } SCSS $color-list : red, orange, yellow, green; .class{ @each $co..

티스토리툴바