面接用の HTML と CSS をマスターする: 必須の質問と驚くべき質問

フロントエンド開発者のポジションの面接の準備をする場合、HTML と CSS は面接で必ず取り上げられる基本的な技術です。ほとんどの雇用主は、HTML 構造と CSS スタイルに関する一般的な質問をしますが、中には驚かれ、混乱を引き起こす可能性のある質問がいくつかあります。そのため、基本的な知識を習得するだけでなく、より深く予想外の質問に備えておくことが重要です。
この投稿では、まず、面接で最も一般的な HTML および CSS の質問 50 個と詳細な回答を取り上げます。最後に、混乱するかもしれない予期せぬ質問をさらに 10 個追加します。ただし、それらの解決方法については説明を付けます。

---

HTML に関する質問:

1. HTML とは何ですか?その基本的な目的は何ですか?
HTML (HyperText Markup Language) は、Web ページ上のコンテンツを構造化するために使用されるマークアップ言語です。タイトル、段落、リンク、画像、表、その他のページ要素を作成できます。

2.以前のバージョンと比較した HTML5 の主な新機能は何ですか?
HTML5 では、

、

、

、

、マルチメディア要素

3. id 属性と class 属性の違いを説明します。
id はページ上の 1 つの要素のみに割り当てることができる一意の識別子ですが、class は複数の要素に割り当てることができ、同様のスタイルや機能を持つ要素をグループ化するために使用されます。

4.セマンティック HTML とは何ですか?なぜ重要ですか?
セマンティック HTML は、明確に定義された意味を持つ要素 (例:

、

、

) を使用します。アクセシビリティ、SEO、コードの読みやすさが向上し、ブラウザやスクリーン リーダーが使いやすくなります。

5.主なセマンティック HTML5 タグは何ですか?
主なタグには、

、

、

、

、

、

、および

があります。これらのタグは、コンテンツを整理するための構造と明確さを提供します。

6. DOCTYPE とは何ですか?HTML ドキュメントで DOCTYPE が重要なのはなぜですか?
宣言では、使用する HTML のバージョンを定義します。 HTML5 では、単純な宣言 すべてのブラウザでページが正しく表示されるようにします。

7. HTML でリンクを作成するには? を使用します。ラベル: ここをクリック。 href 属性は、リンク先の URL を指定します。

8. HTML でテーブルを作成するには?

テーブルは

を使用して作成されます。 、

、

を使用したラベル、および行と列。例:

Ime	Prezime
Marko	Marković

9.画像の alt 属性とは何ですか?なぜ重要ですか?

alt 属性は、表示できない画像の代替テキストを提供します。スクリーン リーダーは画像を説明するためにこれを使用するため、SEO とアクセシビリティにとって重要です。

10. HTML でフォームを作成するには?

フォームは

を使用して作成されます。 、、<button> などのフィールドを含むタグ。例: </button>

Pošalji

11.ラジオとチェックボックス入力の使用方法?

ラジオはグループから 1 つのオプションを選択する必要がある場合に使用され、チェックボックスでは複数のオプションを選択できます。例:

  <input type="radio" name="pol" value="muško"> Muško
  <input type="radio" name="pol" value="žensko"> Žensko
  <br>
  <input type="checkbox" name="hobi" value="sport"> Sport

12. HTML にビデオを埋め込む方法?

を使用するタグ:

   <video controls>
      <source src="video.mp4" type="video/mp4">
   </source></video>

13. HTML フォームのプレースホルダー属性とは何ですか?

プレースホルダー属性は、ユーザーがデータを入力するまで表示される入力フィールド内にテキスト ヒントを提供します。例:

   <input type="text" placeholder="Unesi svoje ime">

14.順序付きリストと順序なしリストを定義するにはどうすればよいですか?

を使用します。番号付きリストと

の場合箇条書きリストの場合。項目は
• を使用して定義されます。例:

• Prva stavka
• Druga stavka

15. HTML で外部リンクと内部リンクを作成するにはどうすればよいですか?

外部リンクはインターネット上の別のページ (完全な URL が使用されます) につながりますが、内部リンクはサイト内の別のページにつながります (相対アドレスが使用されます)。例:

   <a href="https://example.com">Spoljni link</a>
   <a href="/kontakt">Unutrašnji link</a>

CSS pitanja:

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

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:

      body {
        background-image: url('slika.jpg');
      }

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:

      a:hover {
        color: red;
      }

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:

      .container {
        display: flex;
        justify-content: center;
        align-items: center;
      }

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

      .grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
      }

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.

), 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:

      div {
        width: calc(100% - 50px);
      }

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

      button {
        background-color: blue;
        transition: background-color 0.3s ease;
      }
      button:hover {
        background-color: red;
      }

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

      <div class="box rounded"></div>

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:

      :root {
        --main-color: #96c1b0;
      }
      body {
        background-color: var(--main-color);
      }

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).

1. Nivo - univerzalni selektor, ne utiče uopšte na specifičnost (*)

2. Nivo

   • HTML selektor
   • pseudo-element (::before, ::after, ::first-letter, ::first-line, ::selection...)

3. Nivo

   • selektor klase
   • selektor HTML parametra (npr.: a[href$=".pdf"], input[name*="email"] , [class~="button"] ...)
   • pseudo-klasa (:hover, :focus, :active, :first-child, :nth-child())

4. Nivo - ID selektor

5. Nivo - inline CSS

6. Nivo - !important pravilo

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:

      div {
        transition: transform 0.5s;
      }
      div:hover {
        transform: rotate(45deg);
      }

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

      box {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      }

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:

      @media (max-width: 768px) {
        body {
          background-color: blue;
        }
      }

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:

      div {
        opacity: 0.5;
      }

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

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

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:

      h1, h2, h3 {
        color: #96c1b0;
      }

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:

      input[type="text"] {
        padding: 10px;
        border: 2px solid #96c1b0;
      }

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

      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }

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

      div {
        aspect-ratio: 16 / 9;
      }

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

• white-space: kontroliše kako se upravlja razmacima i linijama unutar elementa (npr. nowrap za onemogućavanje prelamanja teksta).

• overflow: određuje šta se dešava sa sadržajem koji izlazi izvan granica elementa (npr. hidden, scroll, auto).

• 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:
  

     p {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

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:

      ul {
        list-style-type: none;
      }

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.

---

Bonus pitanja

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?

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

     <div data-user-id="123"></div>

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

     var userId = document.querySelector('div').dataset.userId;

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:

• link je brži jer se CSS učitava paralelno.

• @import odlaže učitavanje CSS-a, što može usporiti renderovanje stranice.

• link je bolje podržan i ima veći prioritet.

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

     input::placeholder {
       color: grey;
       font-style: italic;
     }

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:

     .triangle {
       width: 0;
       height: 0;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-bottom: 100px solid red;
     }

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; }:

• 1rem je uvek 16px.

• 1em zavisi od veličine fonta roditelja.

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:

     .box {
       width: 61.8%;
       height: 100%;
     }

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:

      p {
        user-select: none;
      }

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

---

Zaključak:

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.

以上が面接用の HTML と CSS をマスターする: 必須の質問と驚くべき質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。