본문 바로가기

웹/HTML & CSS27

[scss] sass/scss 차이점, 컴파일 방법 /sass와 scss의 차이점은? 기본적으로 안에 들어있는 내용은 같지만 작성하는 문법에서 약간의 차이가 있습니다. scss는 css문법과 완벽하게 호환이 되는 그런 구문을 가지고 있습니다. ① 간단한 차이는 { } (중괄호)와 ; (세미콜론)의 유무입니다. *sass는 중괄호와 세미콜론을 가지고 있지 않습니다. ② 또 다른 차이는 Mixins('믹스인'은 재사용 가능한 기능을 만드는 방식을 의미합니다.) sass는 = 와 + 기호로 Mixins 기능을 사용했다면 scss는 @mixin과 @include로 기능을 사용했습니다. 컴파일 방법 scss는 웹에는 직접 동작할 수 없습니다. 최종으로는 표준 css로 동작해야 하며, 전처리기로 작성 후 css로 컴파일해야 합니다. 간단한 scss 코드는 컴파일러를.. 2020. 3. 21.
[HTML] label/input 태그 정리 (웹 접근성) label 태그 label 태그는 양식 입력 창의 요소들을 위한 캡션을 나타냅니다. 코드 작성 방식에는 명시적(explicit)과 암시적(implicit)으로 분류됩니다. label 태그를 쓰는 가장 큰 이유는 웹 접근성을 위함입니다. 먼저 명시적 작성 방식과 암시적 작성 방식에 대해 알아보겠습니다. 1. 명시적 작성 방식 명시적 작성 방식은 label 의 for 속성과 input의 id 속성을 명시함으로써 연결해주는 방식입니다. 2. 암시적 작성 방식 암시적 작성 방식은 label 태그 안에 input 태그를 넣음으로써 for 속성을 명시하지 않더라도 암묵적으로 연결하는 방식입니다. 대부분은 명시적 방식을 선호하고 있습니다. 이유는 오래된 통신 기기는 아직 암시적 방식을 지원하지 않기 때문입니다. in.. 2020. 3. 18.
[HTML] form 태그 속성 정리 FORM 태그 폼은 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용됩니다. 입력된 데이터를 한번에 서버로 전송하면 전송된 데이터는 웹 서버가 처리하고, 결과에 따른 또 다른 웹 페이지를 보여줍니다. 폼 요소는 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있습니다. FORM 태그 속성 폼 태그 속성에는 name, action, method, target 등이 있습니다. 폼 속성을 이용하여 전송할 때 어디로 보내야 하는지 그리고 어떤 방법으로 보낼지 정합니다. 1. action - 폼 내부에 입력 값들 전송하는(받는사람) 서버 측 URL을 지정합니다. - 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하기 때문에 이를 위해 action 속성을 사용합니.. 2020. 3. 17.
[HTML] 웹 표준, 웹 접근성, 웹 호환성 용어 정리 웹 표준이란 웹 표준이란 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 W3C가 권고한 표준안에 따라 웹 사이트를 만들어야 합니다. 웹 표준을 통한 궁극적인 목적은 웹 사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것입니다. 장애인, 노약자를 포함한 모든 사용자들에게 동일한 웹 사이트를 볼 수 있도록 웹 표준 기술 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한 핵심입니다. 그렇다면 웹 접근성은 무엇일까요? 웹 접근성이란 신체적 차이, 장애 여부, 지식의 정도, 기술 등과 같은 사항에 제한되지 않고 사용자가 불편함 없이 웹 페이지를 접근 가능하고 이용할 수 있도록 하는.. 2020. 3. 16.