인터뷰를 위한 HTML 및 CSS 마스터하기: 필수 질문과 당신을 놀라게 할 질문-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

인터뷰를 위한 HTML 및 CSS 마스터하기: 필수 질문과 당신을 놀라게 할 질문

Barbara Streisand

Sep 19, 2024 pm 06:15 PM

프론트엔드 개발자 자리에 대한 면접을 준비할 때 HTML과 CSS는 면접에서 반드시 갖춰야 할 기본 기술입니다. 대부분의 고용주는 HTML 구조와 CSS 스타일에 관해 일반적인 질문을 할 것입니다. 그러나 당신을 놀라게 하고 혼란을 야기할 수 있는 몇 가지 질문이 있습니다. 그렇기 때문에 기본적인 지식을 익히는 것뿐만 아니라 더 깊고 예상치 못한 질문에 대비하는 것이 중요합니다.
이 게시물에서는 먼저 가장 일반적인 HTML 및 CSS 인터뷰 질문 50개와 자세한 답변을 살펴보겠습니다. 마지막으로 여러분을 혼란스럽게 할 수 있는 예상치 못한 질문 10개를 더 추가하겠습니다. 그러나 이를 해결하는 방법에 대한 설명도 함께 제공됩니다.

HTML 질문:

1. HTML이란 무엇이고 그 기본 목적은 무엇인가요?
HTML(HyperText Markup Language)은 웹 페이지의 콘텐츠를 구성하는 데 사용되는 마크업 언어입니다. 제목, 단락, 링크, 이미지, 표 및 기타 페이지 요소를 생성할 수 있습니다.

2. 이전 버전과 비교하여 HTML5의 주요 혁신 사항은 무엇입니까?
HTML5는

3. id 속성과 class 속성의 차이점을 설명해보세요.
id는 페이지에서 하나의 요소에만 할당할 수 있는 고유 식별자인 반면, 클래스는 여러 요소에 할당할 수 있으며 유사한 스타일이나 기능을 가진 요소를 그룹화하는 데 사용됩니다.

4. 시맨틱 HTML이란 무엇이며 왜 중요한가요?
시맨틱 HTML은 명확하게 정의된 의미를 갖는 요소(예:

5. 주요 시맨틱 HTML5 태그는 무엇이며 어떻게 사용되나요?
기본 태그에는

6. DOCTYPE은 무엇이며 HTML 문서에서 왜 중요한가요?
선언은 사용할 HTML 버전을 정의합니다. HTML5에서는 간단한 선언 모든 브라우저에서 페이지가 올바르게 표시되는지 확인합니다.

7. HTML로 링크를 만드는 방법
를 사용하세요. 라벨: 여기를 클릭하세요. href 속성은 링크가 연결되는 URL을 지정합니다.

8. HTML로 테이블을 만드는 방법은 무엇입니까?
테이블은

및

를 사용하여 레이블, 행과 열을 지정합니다. 예:

Ime	Prezime
Marko	Marković

9. 이미지 대체 속성은 무엇이며 왜 중요한가요?
alt 속성은 표시할 수 없는 이미지에 대한 대체 텍스트를 제공합니다. 스크린 리더가 이미지를 설명하는 데 사용되므로 SEO와 접근성이 중요합니다.

10. HTML로 양식을 만드는 방법은 무엇입니까?
양식은

및 <button>과 같은 필드가 있는 태그입니다. 예:

<pre class="brush:php;toolbar:false"> </pre>
<form action="/submit" method="POST">
 <input type="text" name="ime" placeholder="Unesi ime">
 <button type="submit">Pošalji</button>
 </form>

11. 라디오와 체크박스 입력은 어떻게 사용하나요? 
 라디오는 그룹에서 하나의 옵션을 선택해야 할 때 사용되며, 확인란을 사용하면 여러 옵션을 선택할 수 있습니다. 예:

<pre class="brush:php;toolbar:false"> <input type="radio" name="pol" value="muško"> Muško
 <input type="radio" name="pol" value="žensko"> Žensko
 
 <input type="checkbox" name="hobi" value="sport"> Sport
</pre>

12. HTML에 비디오를 삽입하는 방법은 무엇입니까? 
 사용 태그:

13. HTML 형식의 자리 표시자 속성이란 무엇입니까? 
 자리 표시자 속성은 사용자가 데이터를 입력할 때까지 표시되는 입력 필드 내부에 텍스트 힌트를 제공합니다. 예:

14. 순서가 있는 목록과 순서가 없는 목록을 어떻게 정의하나요? 
 
<ol> 번호가 매겨진 목록 및 </ol>
<ul> 글머리 기호 목록의 경우. 항목은 <li>를 사용하여 정의됩니다. 예:

<pre class="brush:php;toolbar:false"> </pre>
<ul>
 <li>Prva stavka</li>
 <li>Druga stavka</li>
 </ul>

15. HTML로 외부 및 내부 링크를 어떻게 생성하나요? 
 외부 링크는 인터넷의 다른 페이지로 연결되는 반면(전체 URL이 사용됨), 내부 링크는 사이트 내의 다른 페이지로 연결됩니다(상대 주소가 사용됨). 예:

<pre class="brush:php;toolbar:false"> <a href="https://example.com">Spoljni link</a>
 <a href="/kontakt">Unutrašnji link</a>
</pre>

<h3>
 
 
 CSS pitanja:
</h3>

16. Šta je CSS i čemu služi? 
 CSS (Cascading Style Sheets) služi za stilizovanje HTML elemenata, definišući boje, margine, pozicioniranje, fontove, itd.

17. Koje su prednosti korišćenja eksternih CSS fajlova? 
 Eksterni CSS fajlovi omogućavaju da se stilovi dele između više HTML stranica, smanjujući redundanciju i olakšavajući održavanje koda.

18. Kako primenjujemo CSS na HTML elemente? 
 CSS se može primeniti na tri načina: inline (unutar HTML-a pomoću style atributa), u <style> oznaci unutar <head>, ili u eksternom CSS fajlu.</style>

19. Objasni box model u CSS-u. 
 CSS box model definiše kako se svaki HTML element prikazuje, uključujući sadržaj (content), padding, border, i margin. To je ključna osnova za razumevanje layout-a.

20. Kako dodati pozadinsku sliku u CSS-u? 
 Koristi se background-image svojstvo:

<pre class="brush:php;toolbar:false"> body {
 background-image: url('slika.jpg');
 }
</pre>

21. Kako centrirati element horizontalno pomoću CSS-a? 
 Za blok elemente koristi se margin: 0 auto ako element ima zadatu širinu. Za inline elemente koristi se text-align: center na roditelju.

22. Kako se kreiraju responsive web stranice pomoću CSS-a? 
 Responsive dizajn se kreira korišćenjem media query-ja, fleksibilnih jedinica poput em, rem, i vw/vh, i fleksibilnih layout sistema kao što su Flexbox i Grid.

23. Šta su CSS pseudo-klase i kako se koriste? 
 Pseudo-klase definišu posebna stanja elemenata, npr. :hover, :focus, :nth-child(). Primer:

<pre class="brush:php;toolbar:false"> a:hover {
 color: red;
 }
</pre>

24. Kako koristiti Flexbox za postavljanje elemenata? 
 Flexbox je moćan alat za postavljanje elemenata u jednom pravcu (horizontalno ili vertikalno) i koristi se pomoću display: flex. Primer:

<pre class="brush:php;toolbar:false"> .container {
 display: flex;
 justify-content: center;
 align-items: center;
 }
</pre>

25. Kako funkcionišu CSS grid layout sistemi? 
 CSS Grid omogućava kreiranje dvodimenzionalnih layout-ova koristeći redove i kolone. 
Primer:

<pre class="brush:php;toolbar:false"> .grid {
 display: grid;
 grid-template-columns: 1fr 2fr;
 }
</pre>

26. Koja je razlika između inline i block elemenata u CSS-u? 
 block elementi zauzimaju celu širinu roditeljskog elementa i počinju novi red (npr. 
<div>), dok inline elementi zauzimaju samo potrebnu širinu i stoje u istom redu (npr. ).

27. Kako funkcioniše z-index? 
 z-index definiše redosled preklapanja elemenata. Elementi sa većim z-index vrednostima će biti iznad onih sa manjim vrednostima. Radi samo na elementima sa position vrednostima osim static.

28. Šta je razlika između position: relative, absolute, fixed, i sticky? 
 - relative: Pozicionira element relativno prema njegovom uobičajenom mestu. 
 - absolute: Pozicionira element relativno prema najbližem pozicioniranom roditelju. 
 - fixed: Element je fiksiran u odnosu na prozor pretraživača. 
 - sticky: Kombinacija relative i fixed - ostaje relativan dok ne dosegne određenu tačku.

29. Kako se koristi calc() funkcija u CSS-u? 
 calc() omogućava kombinovanje različitih CSS jedinica u izračunavanju vrednosti. 
Primer:

<pre class="brush:php;toolbar:false"> div {
 width: calc(100% - 50px);
 }
</pre>

30. Kako se koristi transition za animaciju u CSS-u? 
 transition omogućava dodavanje efekta prelaza između dva stanja elementa. 
Primer:

<pre class="brush:php;toolbar:false"> button {
 background-color: blue;
 transition: background-color 0.3s ease;
 }
 button:hover {
 background-color: red;
 }
</pre>

31. Kako primeniti više klasa na jedan HTML element? 
 Više klasa se dodaje razdvajanjem njihovih imena razmakom. Primer:

32. Kako se kreira vertikalni razmak između blok elemenata? 
 Koristi se margin. Na primer, margin-top ili margin-bottom mogu kreirati razmak između elemenata.

33. Šta su CSS varijable i kako se koriste? 
 CSS varijable omogućavaju definisanje prilagodljivih vrednosti koje se mogu koristiti više puta u stilovima. 
Primer:

<pre class="brush:php;toolbar:false"> :root {
 --main-color: #96c1b0;
 }
 body {
 background-color: var(--main-color);
 }
</pre>

34. Kako izbeći CSS konflikte pomoću specificity pravila? 
 Specificity određuje koja pravila će biti primenjena kada više selektora odgovaraju istom elementu. Specifičniji selektori (npr. ID selektori) imaju prednost nad opštim selektorima (npr. tagovi ili klase).

<ol>
<li>Nivo - univerzalni selektor, ne utiče uopšte na specifičnost (*)</li>
<li>
Nivo

<ul>
<li>HTML selektor </li>
<li>pseudo-element (::before, ::after, ::first-letter, ::first-line, ::selection...)</li>
</ul>
</li>
<li>
Nivo

<ul>
<li>selektor klase </li>
<li>selektor HTML parametra (npr.: a[href$=".pdf"], input[name*="email"] , [class~="button"] ...)</li>
<li>pseudo-klasa (:hover, :focus, :active, :first-child, :nth-child())</li>
</ul>
</li>
<li>Nivo - ID selektor</li>
<li>Nivo - inline CSS</li>
<li>Nivo - !important pravilo</li>
</ol>

35. Šta znači !important i kada ga treba koristiti? 
 !important preuzima prioritet nad bilo kojim drugim pravilima za isti element. Koristi se samo u posebnim slučajevima kada treba nadjačati pravilo.

36. Kako kreirati transition ili transform animacije u CSS-u? 
 Koriste se svojstva poput transition za prelaze između stanja ili transform za transformacije (rotacija, skaliranje, itd.). Primer:

<pre class="brush:php;toolbar:false"> div {
 transition: transform 0.5s;
 }
 div:hover {
 transform: rotate(45deg);
 }
</pre>

37. Kako dodati senku elementima? 
 Koristi se box-shadow za elemente kao što su div-ovi ili text-shadow za tekst. Primer:

<pre class="brush:php;toolbar:false"> box {
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
 }
</pre>

38. Šta znači display: none i kako se razlikuje od visibility: hidden? 
 display: none potpuno uklanja element iz dokumenta i layout-a, dok visibility: hidden element čini nevidljivim, ali on i dalje zauzima prostor na stranici.

39. Kako koristiti media queries za prilagođavanje različitim uređajima? 
 Media queries omogućavaju promenu stilova zavisno od veličine ekrana ili uređaja. 
Primer:

<pre class="brush:php;toolbar:false"> @media (max-width: 768px) {
 body {
 background-color: blue;
 }
 }
</pre>

40. Kako koristiti float i koje su njegove alternative? 
 float se koristi za postavljanje elemenata levo ili desno od roditeljskog elementa. Moderne alternative su Flexbox i Grid.

41. Kako kreirati transparentnost u CSS-u? 
 Koristi se opacity ili RGBA boje. Primer:

<pre class="brush:php;toolbar:false"> div {
 opacity: 0.5;
 }
</pre>

42. Kako definišemo globalne stilove? 
 Globalni stilovi se definišu na vrhu CSS fajla ili koristeći selektore poput * ili html, body. 
Primer:

<pre class="brush:php;toolbar:false"> * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
</pre>

43. Šta su CSS vendor prefiksi i zašto su važni? 
 Vendor prefiksi (npr. -webkit-, -moz-, -o-) omogućavaju podršku za novija CSS svojstva u različitim pretraživačima, dok svojstva još nisu potpuno standardizovana.

44. Kako koristiti min-width i max-width za responsivne dizajne? 
 min-width i max-width ograničavaju minimalne i maksimalne širine elemenata, čime se osigurava prilagodljiv dizajn.

45. Kako primeniti iste stilove na više elemenata u CSS-u? 
 Više selektora se može grupisati koristeći zarez. 
Primer:

<pre class="brush:php;toolbar:false"> h1, h2, h3 {
 color: #96c1b0;
 }
</pre>

46. Kako stilizovati forme u CSS-u? 
 Možeš koristiti CSS pravila kao za druge elemente, ali može biti potrebno dodatno prilagođavanje za različite pretraživače. 
Primer:

<pre class="brush:php;toolbar:false"> input[type="text"] {
 padding: 10px;
 border: 2px solid #96c1b0;
 }
</pre>

47. Šta je clearfix trik u CSS-u? 
 clearfix se koristi za rešavanje problema sa float elementima. Najčešće koristi pseudo-element:

<pre class="brush:php;toolbar:false"> .clearfix::after {
 content: "";
 display: table;
 clear: both;
 }
</pre>

48. Kako koristiti aspect-ratio u CSS-u? 
 aspect-ratio održava proporcije elementa (širina naspram visine) u zadatom odnosu. Primer:

<pre class="brush:php;toolbar:false"> div {
 aspect-ratio: 16 / 9;
 }
</pre>

49. Kako možemo kontrolisati protok teksta unutar elementa? 
 Koriste se svojstva kao što su:

<ul>
<li>white-space: kontroliše kako se upravlja razmacima i linijama unutar elementa (npr. nowrap za onemogućavanje prelamanja teksta).</li>
<li>overflow: određuje šta se dešava sa sadržajem koji izlazi izvan granica elementa (npr. hidden, scroll, auto).</li>
<li>text-overflow: koristi se zajedno sa overflow i white-space svojstvima za kontrolu kako se prikazuje višak teksta, npr. sa ellipsis dodaje tri tačke kada tekst prelazi granicu elementa. Primer: 
</li>
</ul>
<pre class="brush:php;toolbar:false"> p {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
</pre>

Ova svojstva omogućavaju kontrolu prikaza i formatiranja teksta, posebno u slučajevima kada je prostor za tekst ograničen.

50. Kako stilizovati listu tako da nema tačke ili brojeve? 
 Koristi se svojstvo list-style-type: none;. Primer:

<pre class="brush:php;toolbar:false"> ul {
 list-style-type: none;
 }
</pre>

Ovo su najčešća i najbitnija pitanja sa odgovorima za HTML i CSS intervjue. Ova pitanja pokrivaju širok spektar osnovnih i naprednih tema, koje su ključne za web development.

<hr>

<h2>
 
 
 Bonus pitanja
</h2>

Evo 10 pitanja za HTML i CSS koja mogu biti neočekivana ili te mogu zbuniti na intervjuu, zajedno sa objašnjenjima:

1. Kako funkcioniše data-* atribut u HTML-u i za šta se koristi?

<ul>
<li>
data-* atributi se koriste za čuvanje prilagođenih podataka u HTML elementima koje JavaScript može da koristi. Na primer:
</li>
</ul>

Možeš pristupiti ovim podacima pomoću JavaScript-a:

<pre class="brush:php;toolbar:false"> var userId = document.querySelector('div').dataset.userId;
</pre>

2. Šta se dešava ako u CSS-u primeniš width: 100% na element koji već ima padding i border? 
 Podrazumevano, width: 100% će postaviti širinu elementa na 100% njegove roditeljske širine, ali će padding i border dodatno proširiti ukupnu širinu. Da bi to izbegao, koristi box-sizing: border-box, što uključuje padding i border u izračunavanje širine.

3. Koja je razlika između link i @import za dodavanje CSS-a u HTML?

link element se koristi u sekciji za uključivanje CSS-a, dok se @import koristi unutar CSS fajlova za učitavanje drugih CSS fajlova. 
Razlike:

<ul>
<li>link je brži jer se CSS učitava paralelno.</li>
<li>@import odlaže učitavanje CSS-a, što može usporiti renderovanje stranice.</li>
<li>link je bolje podržan i ima veći prioritet.</li>
</ul>

4. Kako možeš stilizovati placeholder tekst u HTML input elementima? 
 Koristi pseudo-klasu ::placeholder da bi stilizovao tekst unutar input polja. Na primer:

<pre class="brush:php;toolbar:false"> input::placeholder {
 color: grey;
 font-style: italic;
 }
</pre>

5. Šta se dešava kada postaviš position: absolute na element bez pozicioniranog roditelja? 
 Ako roditeljski element nema zadatu poziciju (relative, absolute, fixed ili sticky), apsolutno pozicionirani element će se pozicionirati relativno prema prozoru pretraživača, a ne prema roditelju.

6. Kako kreirati trougao koristeći samo CSS? 
Trougao se kreira pomoću border svojstava. Na primer:

<pre class="brush:php;toolbar:false"> .triangle {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
 }
</pre>

Ovaj kod kreira crveni trougao.

7. Kako funkcionišu CSS rem i em jedinice i koja je razlika između njih? 
rem je relativna jedinica u odnosu na font-size root elementa (obično ), dok je em relativan u odnosu na font-size roditeljskog elementa.

Na primer, ako je html { font-size: 16px; }:

<ul>
<li>1rem je uvek 16px.</li>
<li>1em zavisi od veličine fonta roditelja.</li>
</ul>

8. Kako radi zlatni rez (Golden Ratio) u web dizajnu i kako ga koristiš u CSS-u? 
 Zlatni rez je odnos od otprilike 1.618:1 i često se koristi za raspored elemenata na stranici kako bi dizajn bio vizuelno prijatan. Može se koristiti za određivanje proporcija elemenata, npr. širine i visine sekcija:

<pre class="brush:php;toolbar:false"> .box {
 width: 61.8%;
 height: 100%;
 }
</pre>

9. Šta se dešava kada HTML dokument nema deklaraciju ? 
 Bez , pretraživač može prikazivati stranicu u "quirks mode", što uzrokuje ponašanje neusklađeno sa standardima, potencijalno menjajući renderovanje elemenata, veličine margina, itd.

10. Kako možeš učiniti da tekst bude selektibilan ili neselektibilan pomoću CSS-a? 
Koristi CSS svojstvo user-select. Na primer, da onemogućiš selektovanje teksta:

<pre class="brush:php;toolbar:false"> p {
 user-select: none;
 }
</pre>

Možeš omogućiti selektovanje sa user-select: text;.

<hr>

<h2>
 
 
 Zaključak:
</h2>

Intervju za poziciju front-end developera može biti izazovan, ali uz pravu pripremu možete se lako izboriti sa svim pitanjima. Osim što je važno savladati osnovne koncepte HTML-a i CSS-a, od koristi vam može biti i priprema za pitanja koja idu korak dalje i zahtevaju dublje razumevanje tehnologija. Neočekivana pitanja koja vas zbunjuju pružaju priliku da se izdvojite od konkurencije i pokažete svoju sposobnost za rešavanje problema na kreativne načine.

</div>

</li>
</ul></button>

위 내용은 인터뷰를 위한 HTML 및 CSS 마스터하기: 필수 질문과 당신을 놀라게 할 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.